更改SVG标记的颜色 – CSS?

前端之家收集整理的这篇文章主要介绍了更改SVG标记的颜色 – CSS?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到一些使用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>

如果有人可以告诉我如何做到这一点,我会很感激。

解决方法

罗伯特写道,SVG 1.1中是不可能的:

SVG 1.1 spec

Properties inherit into the ‘marker’ element from its ancestors;
properties do not inherit from the element referencing the ‘marker’
element.

SVG2允许你说你想要引用元素的样式:

Properties inherit into the ‘marker’ element from its ancestors;
properties do not inherit from the element referencing the ‘marker’
element. Note however that by using the context-stroke value for the
‘fill’ or ‘stroke’ on elements in its definition,a single marker can
be designed to match the style of the element referencing the marker.

请参阅this section中的示例2,了解如何使用该规范。请注意,这是编辑草稿,语法可能仍然会改变。上下文填充和上下文笔画的实现尚未在所有浏览器中使用。如果你正在寻找要测试的东西,似乎是用一个前缀来实现的(可能在一个pref标志之后,我不清楚哪个标志,但可能是gfx.font_rendering.opentype_svg.enabled)在Firefox Nightlies,见WG discussion here

猜你在找的CSS相关文章