Question

我正在对属于箭头图标的一些笔画进行动画处理，该图标在所有浏览器（包括IE11）中都适用，但Safari除外。由于某些原因，在stroke规则中将0破折号设置为stroke-dasharray时，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并不真正喜欢所有这些浮动坐标，但是您的值听起来也很奇怪。

无论如何，对折线的破折号数组的第一个值使用微小的偏移量，然后对其他值使用精确的值会使Safari满意：

（请注意，我是通过使用来自每个元素getTotalLength()的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.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>

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

2 个答案: