使用笔画达沙雷渲染笔画时的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

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

无论如何，对polyline的破折号数组的第一个值使用一个很小的偏移量，然后为其他数组使用精确的值，将使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>

​

Answer 2

我会通过更改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>

​