Пунктирная линия SVG с не пунктирным маркером в Safari - PullRequest
Новая
       22

Пунктирная линия SVG с не пунктирным маркером в Safari

0 голосов
/ 07 декабря 2018

Мне нужна пунктирная линия с не пунктирным наконечником стрелки, но в Safari на маркеры, по-видимому, также накладывается неясность.

Демонстрация:

<svg width="100%" height="100%">

  <defs>

    <marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "></path>
    </marker>

  </defs>

  <line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>

</svg>

Как это выглядит в Firefox (и Chrome), вот как я хочу, чтобы это было:
Firefox

Как это выглядит в Safari (12.0 и текущий просмотр технологии):
Safari

Установка stroke-dasharray на 0 или пустая строка для <path> маркера, кажется, не имеет никакого эффекта вообще.Установка его на 1 0 (который пахнет как хак) работает почти идеально, но наконечник наконечника стрелы не заостренный:

Safari non-pointy tip

Как лучше всегопереопределить это поведение Safari и получить пунктирную линию с не пунктирной стрелкой с острым наконечником?Мне чего-то не хватает, почему Safari ведет себя так или это просто ошибка?

1 Ответ

0 голосов
/ 07 декабря 2018

Я переписал путь для маркера.Теперь это начинается в середине стороны вместо вершины.Также я использую stroke-dasharray="30,0", где 30 - длина пути для маркера. 

<svg width="100%" height="100%">

  <defs>

    <marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
      <path transform="scale(-0.4) translate(-3,0)" style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1pt;stroke-opacity:1" d="M-2.88,0L-2.88,5L 5.77,0L -2.88,-5L-2.88,0z" stroke-dasharray="30,0"></path>
    </marker>

  </defs>

  <line class="line" stroke-dasharray="5,5" x1="20" y1="20" x2="80" y2="80" marker-start="url(#myMarker)" stroke-width="10" stroke="black"></line>
  


</svg>
...