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

Question

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

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

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

• 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 中的 Codepens 之后，它似乎发生在 每种场景，不同设备的轮廓动画都是不同的。

这可能是因为默认安装在不同小工具上的字体。 在您的应用程序中，您为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>