Изменение цвета маркера 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>

Если кто-то может дать мне советы о том, как это можно сделать, я был бы признателен.

Ответы

Ответ 1

Как писал Роберт, это невозможно в SVG 1.1:

Из спецификации SVG 1.1:

Свойства наследуют элемент 'marker от своих предков; свойства не наследуются от элемента, ссылающегося на "маркер" элемент.

SVG2 позволяет вам сказать, что вам нужен стиль из ссылочного элемента:

Свойства наследуют элемент 'marker от своих предков; свойства не наследуются от элемента, ссылающегося на "маркер" элемент. Обратите внимание, что, используя значение контекстного хода для "Заполнение" или "удар" по элементам в его определении, один маркер может быть сконструированы так, чтобы соответствовать стилю элемента, ссылающегося на маркер.

См. пример 2 в этом разделе спецификации для того, как это можно использовать. Обратите внимание, что это черновик редактора, и что синтаксис все еще может измениться. Реализации context-fill и context-stroke еще не во всех браузерах. Если вы ищете что-то для тестирования, похоже, оно реализовано с помощью префикса (возможно, за флагом pref, я не совсем понимаю, на каком флаге, но, возможно, gfx.font_rendering.opentype_svg.enabled) в Firefox Nightlies, см. Обсуждение WG здесь.

Ответ 2

Моим решением было определить 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/

Ответ 3

Вы можете создать другой defs для маркера на основе входных данных, а затем вызвать этот маркер по id в конце пути.

Это пример, который хорошо работает: https://bl.ocks.org/denisemauldin/d797804c235365526e8b85c3081c4271

Я попробовал это для моего случая, и это тоже работает. Надеюсь это поможет.