33

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.

For example:

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

4

3 回答 3

28

正如罗伯特所写，这在 SVG 1.1 中是不可能的：

从SVG 1.1 规范：

属性从其祖先继承到“标记”元素；属性不从引用“标记”元素的元素继承。

SVG2确实允许你说你想要引用元素的样式：

属性从其祖先继承到“标记”元素；属性不从引用“标记”元素的元素继承。但是请注意，通过在其定义中的元素上使用“填充”或“描边”的上下文描边值，可以设计单个标记以匹配引用该标记的元素的样式。

请参阅规范本节中的示例 2，了解如何使用它。请注意，这是编辑草稿，语法可能仍会更改。context-fill和context-stroke尚未在所有浏览器中实现。gfx.font_rendering.opentype_svg.enabled如果您正在寻找要测试的东西，它似乎是在 Firefox Nightlies 中使用前缀（可能在 pref 标志后面，我不太清楚哪个标志，但可能）实现的，请参阅此处的 WG 讨论。

于 2013-05-21T08:36:44.393 回答
9

我的解决方案是定义 2 个标记并在 css 中选择正确的一个。

<html>
    <head>
        <style>
            #arrow {
                stroke: #000000;
                fill: #000000;
            }
            #hover-arrow {
                stroke: #98dfd9;
                fill: #98dfd9;
            }
            .edge{
                position: absolute;
                stroke: #000;
                marker: #000;
                fill: #000;
            }
            .edge-out-dir{
                stroke-width: 1;
                marker-end: url("#arrow")
            }
            .edge:hover{
                stroke: #98dfd9;
            }
            .edge:hover .edge-out-dir{
                marker-end: url("#hover-arrow")
            }
        </style>
    </head>
    <body>
        <svg>
            <defs>
                <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
                <marker id="hover-arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
            </defs>
        </svg>


        <svg width="276px" height="100px" class="edge" style="left: 466px; top: 228px;">
            <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
            </line>
        </svg>
        <svg width="276px" height="100px" class="edge" style="left: 466px; top: 428px;">
            <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
            </line>
        </svg>
    </body>
</html>

https://jsfiddle.net/mo3eLsgf/

于 2018-05-05T12:18:53.027 回答
1

defs您可以根据输入数据为标记创建不同的标记，然后在路径末尾通过id调用此标记。

这是一个很好的例子： https ://bl.ocks.org/denisemauldin/d797804c235365526e8b85c3081c4271

我已经为我的案例尝试过这个，它也有效。希望这可以帮助。

于 2019-03-20T21:49:25.250 回答