Маркер SVG исчезает, когда скрыт SVG с идентичным определением - PullRequest
Новая
       25

Маркер SVG исчезает, когда скрыт SVG с идентичным определением

0 голосов
/ 24 января 2019

Рассмотрим этот фрагмент HTML: 

<div class="container">
    <svg class="graph" style="visibility: hidden">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" d="M 0 0 L 100 10"></path>
    </svg>
    <svg class="graph">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" d="M 0 0 L 100 10"></path>
    </svg>
</div>

Содержит элемент SVG, который показывает короткую стрелку со стрелкой, определенную в разделе <defs> элемента SVG.В частности, он содержит две копии этого изображения.

Обычно это выглядит так:

two arrows

Однако первый SVGэлемент скрытВ Chrome результат выглядит следующим образом:

one line with no arrow head

Похоже, определение маркера недействительно из-за того, что первый SVG скрыт, но существует избыточностьопределение во втором SVG (и по определению, каждое определение должно применяться только к своему элементу).

В Firefox я вижу идентичный рендеринг.Safari показывает стрелку.

Почему Chrome и Firefox не отображают стрелку?Это ошибка в обоих браузерах, или я неправильно понимаю спецификацию?

1 Ответ

0 голосов
/ 24 января 2019

Основная ошибка: вы используете одни и те же id с дважды.Также я бы изменил refX="10" для arrowhead на что-то другое, например 5.

Если вам нужно снова использовать стрелку, сделайте это с элементом <use>. 

svg{border:1px solid; width:45vw;}
<div class="container">  
    <svg class="graph" viewBox="-10 -10 120 50">
        <style type="text/css">
            <![CDATA[
              .arrow {
                fill: none;
                stroke-width: 2;
                stroke: #000;
                marker-end: url(#arrowhead);
              }
            ]]>
        </style>
        <defs>
            <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <path fill="#000" d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <path class="arrow" id="theArrow" d="M 0 0 L 100 10"></path>
    </svg>
    
 <svg class="graph" viewBox="-10 -10 120 50">
 <use xlink:href="#theArrow" />
 </svg>
</div>

Надеюсь, это поможет.

...