SVG文本跟踪在iOS设备上呈现不同

Question

我通过CSS使用SVG跟踪动画，通过关键帧动画改变stroke-dasdoffset。

当我在iOS设备(iPad/iPhone)上测试我的设计时，stroke-dashoffset/array的计算似乎不同，以至于它是一个完全不同的动画。

我认为我的实现是原因，但在Chrome/Safari/Firefox中测试以下codepends后，它似乎发生在每种情况下，不同设备的轮廓动画不同。

• https://codepen.io/csbatista/pen/EgxQgx
• https://codepen.io/MilloEscobar/pen/eNVaed

<svg version="2.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class=" ebw-nuwaru-page-title-svg" viewbox="0 0 250 90">
<text text-anchor="start" x="0" y="60" class="title-text text-stroke" clip-path="url(#text1)">Newfire</text>
<defs>
<clipPath id="text1">
<text text-anchor="start" x="0" y="60" class="title-text">Newfire</text>
</clipPath>
</defs>
</svg>

是否有缺失的CSS块使此工作在iOS设备上?我很想知道发生了什么，如果它是一个限制或简单的编程错误。

任何指导和知识将不胜感激。

Answer 1

我认为我的实现是原因，但在测试在Chrome/Safari/Firefox中，它似乎发生在在每种情况下，轮廓动画在不同的设备上都是不同的。

原因可能是不同设备默认安装的字体。在您的应用程序中，您为stroke-dasharray ="500"设置了一个参数，但对于其他字体，此值可能不同。

因此，动画可能看起来不同。

---

考虑将文本的每个字母转换为单独的向量对象的解决方案。

这个转换将保证一个跨浏览器的解决方案。

要做到这一点，在一个矢量编辑器，如Inkscape:

1. 设置你想要的文档大小是svg
2. 选择所需字体，大小为
3. 输入所需文本
4. 选择菜单项:轮廓/轮廓对象。
5. 保存为* .svg格式
6. 必要时，使用SVGOMG
进行代码优化

接下来，添加CSS样式和stroke-dashoffset动画。

.text-line {
fill:none;
stroke:#2A4A73;
stroke-width:2;
stroke-dasharray: 572;
stroke-dashoffset: 572;
animation: dash 5s linear forwards, filling 4s ease-in 3s forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes filling {
from{
fill: #2A4A73;
fill-opacity: 0;
}
to {
fill: #2A4A73;
fill-opacity: 1;
}
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg4" viewBox="0 0 1000 100">
<g aria-label="Hell0 World!" style="line-height:13px;-inkscape-font-specification:'Georgia Bold'" id="text819" font-style="normal" font-variant="normal" font-weight="700" font-stretch="normal" font-size="100" font-family="Georgia" letter-spacing="0" word-spacing="0" fill="#000" fill-opacity="1" stroke="none">
<path class="text-line" id="H"  d="M288 90h-36v-4h4l3-1 2-2 1-3V57h-29v23l1 3 2 2h3l4 1v4h-36v-4h3l4-1 2-2 1-3V33l-1-3-2-2-4-1h-3v-4h36v4h-3l-4 1-2 2-1 3v20h29V33l-1-3-2-2-3-1h-4v-4h36v4h-3l-4 1-2 2-1 3v47l1 3 2 2 4 1h3z" />
<path class="text-line" id="E" d="m345 78-4 5-6 5-6 2-7 1q-7 0-12-2l-9-5-5-8-1-10q0-5 2-9 1-4 5-8l8-5q5-2 11-2l10 1q5 2 7 5 3 2 4 6l1 8v3h-31q0 9 3 14 4 5 12 5 5 0 8-2 4-2 6-6zm-18-17-1-6-1-5q0-2-2-3l-3-1q-4 0-6 3-2 4-2 12z" />
<path class="text-line" id="L_1" d="M378 90h-30v-4h5l2-2V26l-2-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z"/>
<path class="text-line" id="L_2"  d="M411 90h-30v-4h5l2-2V26l-2-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z" />
<path class="text-line" id="O_1" d="M468 46q4 4 5 9 2 4 2 9 0 7-2 12l-6 8-9 5q-5 2-12 2t-12-2q-6-2-9-6-4-3-6-8t-2-11l2-10 5-8q4-4 10-6 5-2 12-2 8 0 13 2t9 6zm-13 35 2-7V56l-2-8q-1-3-4-4-2-2-5-2t-5 2l-4 4-1 7-1 9v9l2 7q1 3 4 5 2 2 5 2t5-2q3-1 4-4z" />
<path class="text-line" id="W" d="m614 27-3 1-3 1-3 2-1 4-8 23-12 32h-9l-18-49-15 49h-10l-12-35-7-20-2-4-3-2-2-2h-4v-4h36v4h-5l-2 1-1 1-1 1 1 1v1l4 14 9 26 15-49h10l18 50 6-20 4-13 1-5 1-4-1-2-3-1-3-1h-4v-4h27z" />
<path class="text-line" id="O_2" d="m663 49 5 7 2 10-2 10-5 8-9 5q-5 2-12 2l-10-2q-5-1-9-4l-5-8q-2-5-2-11l1-10q2-4 6-7 3-4 8-5l12-2q6 0 11 2 5 1 9 5zm-12 32 1-6 1-9-1-7-1-7-3-5-5-1-5 1-3 5-2 6v16q0 4 2 7l3 5 5 1 5-1 3-5z" />
<path class="text-line" id="R" d="m723 52-2 6q-3 3-6 3-4 0-6-2t-2-5v-4l-4 1q-3 1-4 4v28l2 2 3 1h4v4h-32v-4h5l2-2V54l-1-3-1-2-3-1-2-1v-3l22-1h1v7q3-4 7-6 3-2 7-2 5 0 7 3 3 2 3 7z" />
<path class="text-line" id="L_3" d="M755 90h-30v-4h5l2-2V29l-1-3-1-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z" />
<path class="text-line" id="D" d="m820 89-23 1-1-1v-4l-7 4-8 2q-9 0-15-7t-6-18q0-10 7-17 6-7 16-7l7 1 6 2V29l-1-3-2-2-3-2h-5v-4l26-1v62l1 3 2 2 3 1h3zm-24-9V54l-1-3-2-2-2-2-4-1q-4 0-7 6-3 5-3 15v7l2 5 3 4 6 1 4-1 4-3z" />
<path class="text-line" id="Z" d="M847 31v5l-2 7-2 10-3 15h-4l-2-15-3-10-1-7-1-5q0-4 3-7 2-2 6-2t7 2q2 3 2 7zm0 51q0 4-3 6-2 3-6 3-3 0-6-3-3-2-3-6 0-3 3-6l6-2q4 0 6 2 3 3 3 6z" />
</g>
</svg>

更新动画字母一个接一个

要做到这一点，您需要准确地计算每个字母的最大行长。

console.log('length letter H :' + H.getTotalLength())

在begin动画启动命令中使用逻辑链逐个绘制字母。
例如:begin =" an_H.end "， -字母e的动画将在动画H结束后开始

点击后开始绘制动画:

.container {
width:100vw;
height:auto;
}
.text-line {
fill: #2A4A73;
stroke:#2A4A73;
stroke-width:2;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 1000 100" style="border:solid 1px #C1C4C7">
<g  aria-label="Hell0 World!" style="line-height:13px;-inkscape-font-specification:'Georgia Bold'"  font-weight="700" font-stretch="normal" font-size="100" font-family="Georgia" >
<g id="word" fill-opacity="0" >

<path class="text-line" id="H"  stroke-dasharray="519" stroke-dashoffset="519" d="M288 90h-36v-4h4l3-1 2-2 1-3V57h-29v23l1 3 2 2h3l4 1v4h-36v-4h3l4-1 2-2 1-3V33l-1-3-2-2-4-1h-3v-4h36v4h-3l-4 1-2 2-1 3v20h29V33l-1-3-2-2-3-1h-4v-4h36v4h-3l-4 1-2 2-1 3v47l1 3 2 2 4 1h3z" >

<!-- Animation of drawing a letter "H" -->
<animate id="an_H" attributeName="stroke-dashoffset" values="519;0" dur="1s" begin="svg1.click" restart="never" fill="freeze" > </path>   

<path class="text-line" id="E" stroke-dasharray="279" stroke-dashoffset="279" d="m345 78-4 5-6 5-6 2-7 1q-7 0-12-2l-9-5-5-8-1-10q0-5 2-9 1-4 5-8l8-5q5-2 11-2l10 1q5 2 7 5 3 2 4 6l1 8v3h-31q0 9 3 14 4 5 12 5 5 0 8-2 4-2 6-6zm-18-17-1-6-1-5q0-2-2-3l-3-1q-4 0-6 3-2 4-2 12z" >
<!-- Animation of drawing a letter "E" -->
<animate id="an_E" attributeName="stroke-dashoffset"  values="279;0" dur="0.5s" begin="an_H.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="L_1" stroke-dasharray="217" stroke-dashoffset="217" d="M378 90h-30v-4h5l2-2V26l-2-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z">
<animate id="an_L_1" attributeName="stroke-dashoffset" values="217;0" dur="0.4s" begin="an_E.end-0.2s" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="L_2" stroke-dasharray="217" stroke-dashoffset="217"  d="M411 90h-30v-4h5l2-2V26l-2-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z" >
<animate id="an_L_2" attributeName="stroke-dashoffset" values="217;0" dur="0.4s" begin="an_L_1.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="O_1" stroke-dasharray="289" stroke-dashoffset="289"  d="M468 46q4 4 5 9 2 4 2 9 0 7-2 12l-6 8-9 5q-5 2-12 2t-12-2q-6-2-9-6-4-3-6-8t-2-11l2-10 5-8q4-4 10-6 5-2 12-2 8 0 13 2t9 6zm-13 35 2-7V56l-2-8q-1-3-4-4-2-2-5-2t-5 2l-4 4-1 7-1 9v9l2 7q1 3 4 5 2 2 5 2t5-2q3-1 4-4z" >
<animate id="an_O_1" attributeName="stroke-dashoffset" values="289;0" dur="1s" begin="an_L_2.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="W" stroke-dasharray="572" stroke-dashoffset="572" d="m614 27-3 1-3 1-3 2-1 4-8 23-12 32h-9l-18-49-15 49h-10l-12-35-7-20-2-4-3-2-2-2h-4v-4h36v4h-5l-2 1-1 1-1 1 1 1v1l4 14 9 26 15-49h10l18 50 6-20 4-13 1-5 1-4-1-2-3-1-3-1h-4v-4h27z" >
<animate id="an_W" attributeName="stroke-dashoffset" values="572;0" dur="1s" begin="an_O_1.end-0.5s" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="O_2" stroke-dasharray="267" stroke-dashoffset="267" d="m663 49 5 7 2 10-2 10-5 8-9 5q-5 2-12 2l-10-2q-5-1-9-4l-5-8q-2-5-2-11l1-10q2-4 6-7 3-4 8-5l12-2q6 0 11 2 5 1 9 5zm-12 32 1-6 1-9-1-7-1-7-3-5-5-1-5 1-3 5-2 6v16q0 4 2 7l3 5 5 1 5-1 3-5z" >
<animate id="an_O_2" attributeName="stroke-dashoffset" values="267;0" dur="1s" begin="an_W.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="R" stroke-dasharray="231.5" stroke-dashoffset="231.5" d="m723 52-2 6q-3 3-6 3-4 0-6-2t-2-5v-4l-4 1q-3 1-4 4v28l2 2 3 1h4v4h-32v-4h5l2-2V54l-1-3-1-2-3-1-2-1v-3l22-1h1v7q3-4 7-6 3-2 7-2 5 0 7 3 3 2 3 7z" >
<animate id="an_R" attributeName="stroke-dashoffset" values="231.5;0" dur="0.5s" begin="an_O_2.end-0.2s" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="L_3" stroke-dasharray="216.3" stroke-dashoffset="216.3"  d="M755 90h-30v-4h5l2-2V29l-1-3-1-2-3-2h-4v-4l24-1 1 1v65l2 2 2 1h3z" > 
<animate id="an_L_3" attributeName="stroke-dashoffset" values="216.3;0" dur="0.5s" begin="an_R.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="D" stroke-dasharray="367" stroke-dashoffset="367" d="m820 89-23 1-1-1v-4l-7 4-8 2q-9 0-15-7t-6-18q0-10 7-17 6-7 16-7l7 1 6 2V29l-1-3-2-2-3-2h-5v-4l26-1v62l1 3 2 2 3 1h3zm-24-9V54l-1-3-2-2-2-2-4-1q-4 0-7 6-3 5-3 15v7l2 5 3 4 6 1 4-1 4-3z" >
<animate id="an_D" attributeName="stroke-dashoffset" values="367;0" dur="1s" begin="an_L_3.end" restart="whenNotActive" fill="freeze" /></path> 

<path class="text-line" id="Z" stroke-dasharray="163" stroke-dashoffset="163" d="M847 31v5l-2 7-2 10-3 15h-4l-2-15-3-10-1-7-1-5q0-4 3-7 2-2 6-2t7 2q2 3 2 7zm0 51q0 4-3 6-2 3-6 3-3 0-6-3-3-2-3-6 0-3 3-6l6-2q4 0 6 2 3 3 3 6z" > 
<animate id="an_Z" attributeName="stroke-dashoffset" values="163;0" dur="0.5s" begin="an_D.end-0.25s" restart="whenNotActive" fill="freeze" /></path> 
</g> 
<!-- Animation of filling letters -->
<animate id="an_word" xlink:href="#word"  attributeName="fill-opacity" values="0.1;1" dur="1s" begin="an_Z.end" restart="whenNotActive" fill="freeze" /> 
</g>

</svg> 
</div>
<script>
console.log('length letter H :' + H.getTotalLength())
</script>