更改SVG标记的颜色-CSS? [英] Changing an SVG marker's color - CSS?

问题描述

我已经看到了许多使用CSS来影响SVG元素样式的示例，但是到目前为止，没有一个示例可以帮助我解决有关标记的问题.老实说，我仍在研究两者的语法(SVG和CSS).

I've seen a number of examples of using CSS to affect the style of SVG elements, but none so far that help with my question about markers. And honestly, I'm still working through the syntax of both(SVG & CSS).

我想定义一个标记，然后可以在不同的地方使用不同的颜色使用它.

I want to define a marker, and then be able to use it in various places but with different colors.

例如:

<?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>

如果有人可以给我提示如何完成此操作，我将不胜感激.

If someone could give me tip on how this might be done, I would appreciate it.

推荐答案

正如Robert所写，在SVG 1.1中是不可能的:

As Robert wrote, it's not possible in SVG 1.1:

根据 SVG 1.1规范:

属性从其祖先那里继承到标记"元素中； 属性不会从引用标记"的元素继承 元素.

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

SVG2 确实允许您说您想要引用元素中的样式:

SVG2 does allow you to say that you want the style from the referencing element:

属性从其祖先那里继承到标记"元素中； 属性不会从引用标记"的元素继承 元素.但是请注意，通过将context-stroke值用于 在定义中的元素上填充"或描边"，单个标记可以 设计为匹配引用标记的元素的样式.

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.

有关如何使用的信息，请参见规范的本节中的示例2.请注意，这是编辑的草稿，语法可能仍会更改. context-fill和context-stroke的实现尚未在所有浏览器中实现.如果您正在寻找要测试的东西，它似乎已在Firefox Nightlies中以前缀(可能在pref标志后面，我不清楚是哪个标志，但可能不是gfx.font_rendering.opentype_svg.enabled)实现，请参见工作组讨论在这里.

See example 2 in this section of the spec for how that can be used. Do note that this is an editor's draft, and that the syntax may still change. Implementations of context-fill and context-stroke is not yet in all browsers. If you're looking for something to test in, it seems to be implemented with a prefix (possibly behind a pref flag, I'm not exactly clear on which flag, but possibly gfx.font_rendering.opentype_svg.enabled) in Firefox Nightlies, see WG discussion here.

这篇关于更改SVG标记的颜色-CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！