33

CSS を使用して SVG 要素のスタイルに影響を与える例を数多く見てきましたが、マーカーに関する私の質問に役立つものは今のところありません。そして正直なところ、私はまだ両方の構文（SVGとCSS）に取り組んでいます。

マーカーを定義して、さまざまな場所でさまざまな色で使用できるようにしたいと考えています。

例えば：

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
     viewBox="0 0 180 320">

<defs>
    <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1">
        <line x1="0" y1="-1" x2="0" y2="1" />
        <line x1="-1" y1="0" x2="1" y2="0" /> 
        <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" />
        <line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" />
    </marker>
</defs>

.AsteriskMarkerClass { stroke:red; }
    <path d="M 60,100"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

.AsteriskMarkerClass { color:green; }
    <path d="M 90,140"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

</svg>

これがどのように行われるかについて誰かが私にヒントを与えることができれば、私はそれを感謝します.

4

3 に答える 3

28

Robert が書いたように、SVG 1.1 では不可能です:

SVG 1.1仕様から：

プロパティは、その先祖から「マーカー」要素に継承されます。プロパティは、'marker' 要素を参照する要素から継承されません。

SVG2では、参照要素からスタイルが必要であると言うことができます。

プロパティは、その先祖から「マーカー」要素に継承されます。プロパティは、'marker' 要素を参照する要素から継承されません。ただし、定義内の要素の「塗りつぶし」または「ストローク」に context-stroke 値を使用することで、マーカーを参照する要素のスタイルに一致するように単一のマーカーを設計できることに注意してください。

使用方法については、仕様のこのセクションの例 2 を参照してください。これは編集者のドラフトであり、構文は変更される可能性があることに注意してください。との実装はcontext-fill、context-strokeまだすべてのブラウザに搭載されているわけではありません。テストするものを探している場合は、プレフィックス付きで実装されているようです (おそらく pref フラグの背後にあり、どのフラグかは正確にはわかりませんが、おそらくgfx.font_rendering.opentype_svg.enabled) Firefox Nightlies では、WG の議論を参照してください。

于 2013-05-21T08:36:44.393 に答える