使用 stroke-dasharray 渲染笔划时出现 Safari 问题

Question

我正在制作属于箭头图标的一些笔划的动画，这在所有浏览器（包括 IE11）中都很好用，Safari 除外。出于某种原因，当 stroke 破折号在 stroke-dasharray 规则中设置为 0 时，Safari 会呈现黑色小斑点。我的代码如下：

<svg aria-hidden="true" class="icon icon--arrow-right" height="24px" viewbox="0 0 24 24" width="24px">
  <g>
    <path class="stroke stroke--1" d="M4,12 L19.3,12"></path>
    <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>
  </g>
</svg>

.icon {
  stroke: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
}

.icon--arrow-right .stroke--1 {
  stroke-dasharray: 0 15.29;
  transition: stroke-dasharray 250ms ease-in-out;
}

.icon--arrow-right.active .stroke--1 {
  stroke-dasharray: 15.29 0;
}

.icon--arrow-right .stroke--2 {
  stroke-dasharray: 0 6.5 0 6.5;
  transition: stroke-dasharray 250ms ease-in-out 250ms;
}

.icon--arrow-right.active .stroke--2 {
  stroke-dasharray: 0 0 13 0;
}

运行 Safari 中的以下代码片段可重现问题。

var el = document.querySelector('.icon');

el.onclick = function() {
  el.classList.toggle('active');
}

.icon {
  border: 1px solid currentColor;
  stroke: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
  cursor: pointer;
}

.icon--arrow-right .stroke--1 {
  stroke-dasharray: 0 15.29;
  transition: stroke-dasharray 250ms ease-in-out;
}

.icon--arrow-right.active .stroke--1 {
  stroke-dasharray: 15.29 0;
}

.icon--arrow-right .stroke--2 {
  stroke-dasharray: 0 6.5 0 6.5;
  transition: stroke-dasharray 250ms ease-in-out 250ms;
}

.icon--arrow-right.active .stroke--2 {
  stroke-dasharray: 0 0 13 0;
}

<p>Click the button below to toggle the <code>.active</code> class.</p>
<svg aria-hidden="true" class="icon icon--arrow-right" height="24px" viewbox="0 0 24 24" width="24px">
  <g>
    <path class="stroke stroke--1" d="M4,12 L19.3,12"></path>
    <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>
  </g>
</svg>
<p>In Safari, you will see black flecks where <code>stroke</code> dash lengths are set to <code>0</code> when the icon is not active.

有谁知道为什么在 Safari 中会发生这种情况，以及如何解决它，以便在 stroke-dash 设置为 0 时看不到黑色斑点。

Answer 1

我会通过更改 stroke-dashoffset 的值而不是对 stroke-dasharray 值进行动画处理来制作此类动画。请注意，我已经用你移动两次到箭头尖端的路径更改了多边形。这正在解决您在 Safari 上遇到的问题。

var el = document.querySelector('.icon');

el.onclick = function() {
  el.classList.toggle('active');
}

.icon {
  border: 1px solid currentColor;
  stroke: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
  cursor: pointer;
}

.icon--arrow-right .stroke--1 {
  stroke-dasharray: 15.3;
  stroke-dashoffset: 15.3;
  transition: stroke-dashoffset 250ms ease-in-out;
}

.icon--arrow-right.active .stroke--1 {
  stroke-dashoffset: 0;
}

.icon--arrow-right .stroke--2 {
  stroke-dasharray: 6.22;
  stroke-dashoffset: 6.22;
  transition: stroke-dashoffset 250ms ease-in-out 250ms;
}

.icon--arrow-right.active .stroke--2 {
  stroke-dashoffset: 0;
}

<p>Click the button below to toggle the <code>.active</code> class.</p>
<svg aria-hidden="true" class="icon icon--arrow-right" height="240px" viewbox="0 0 24 24" width="240px">
  <g>
    <path class="stroke stroke--1" d="M4,12 L19.3,12"></path>
    <!--<polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>-->
    
     <path class="stroke stroke--2" d="M19.3,12.3L15.05, 7.76M19.3,11.7L15.05, 16.24" />
  </g>
</svg>
<p>In Safari, you will see black flecks where <code>stroke</code> dash lengths are set to <code>0</code> when the icon is not active.</p>

Answer 2

不确定这里到底是什么问题，听起来 Safari 并不真正喜欢所有这些浮动坐标，但您的值听起来也很奇怪。

无论如何，对折线的第一个值使用微小的偏移 dash-array 然后对其他值使用精确的值会让 Safari 满意：

（请注意，我通过使用 Safari 从每个元素的 getTotalLength() 得到的结果得到这些值）

var el = document.querySelector('.icon');

el.onclick = function() {
  el.classList.toggle('active');
}

.icon {
  border: 1px solid currentColor;
  stroke: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
  cursor: pointer;
}

.icon--arrow-right .stroke--1 {
  stroke-dasharray: 0 15.3;
  transition: stroke-dasharray 250ms ease-in-out;
}

.icon--arrow-right.active .stroke--1 {
  stroke-dasharray: 15.3 0;
}

.icon--arrow-right .stroke--2 {
  stroke-dasharray: 0.0001 6.003 0.0001 6.003;
  transition: stroke-dasharray 250ms ease-in-out 250ms;
}

.icon--arrow-right.active .stroke--2 {
  stroke-dasharray: 0 0 13 0;
}

<p>Click the button below to toggle the <code>.active</code> class.</p>
<svg aria-hidden="true" class="icon icon--arrow-right" height="240px" viewbox="0 0 24 24" width="240px">
  <g>
    <path class="stroke stroke--1" d="M4,12 L19.3,12"></path>
    <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>
  </g>
</svg>

使用 stroke-dasharray 渲染笔划时出现 Safari 问题

Safari issue when rendering strokes using stroke-dasharray

html

css

svg

stroke

stroke-dasharray