1

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

<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 中会发生这种情况，以及如何解决它，以便当 astroke-dash设置为0.

4

2 回答 2

1

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

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

于 2019-06-18T12:38:04.250 回答
0

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>

于 2019-06-17T07:35:57.103 回答