DevToolBox

🎨 CSS paint-order ジェネレーター

SVG/テキストの描画順序（fill/stroke/markers）を制御するCSSを生成します

🔍 ライブプレビュー

TEXT
現在の paint-order: normal

🎨 カラー設定

paint-order 値を選択

📖 説明

デフォルトの描画順序（fill → stroke → markers）

使用例:
  • SVGテキストで文字の輪郭を内側に表示
  • ロゴやアイコンの視覚効果の調整
  • グラフィックデザインでの描画順序の制御

生成されたCSS

.element {
  paint-order: normal;
  fill: #3b82f6;
  stroke: #ef4444;
  stroke-width: 3px;
}

SVGコード例

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text
    x="100"
    y="100"
    font-size="48"
    font-weight="bold"
    text-anchor="middle"
    fill="#3b82f6"
    stroke="#ef4444"
    stroke-width="3"
    style="paint-order: normal;"
  >
    TEXT
  </text>
</svg>

ℹ️ ブラウザサポート

✅ 良好なサポート: Chrome 35+, Edge 17+, Safari 8+, Firefox 60+

主にSVG要素とSVG内のテキストに適用されます。通常のHTML要素では効果がありません。