Safari上的SVG笔划破折号渲染问题

Question

我有一条路径，可以通过使用JS中的stroke-dasharray方法将stroke-dashoffset和getTotalLength()设置为总长度。

这将使笔触看起来不可见，这是我的意图。

我在下面添加了一条重复的浅蓝色路径，作为视觉辅助，看起来像什么。

问题在于，在Safari中，路径的右侧有笔画的一小部分。

在演示中，我有3条路径，它们看起来是重复的，但是它们的“路径”属性不同。第一个具有相对坐标并具有transform属性（偶然从Inkscape Program中遗留下来的）。第二个具有绝对坐标。第三个具有相对坐标。

只有第一个路径在Safari中正确隐藏了它的笔触

const pathA = document.querySelector(".path-A");
const pathB = document.querySelector(".path-B");
const pathC = document.querySelector(".path-C");

pathA.setAttribute("stroke-dasharray", pathA.getTotalLength());
pathA.setAttribute("stroke-dashoffset", pathA.getTotalLength());

pathB.setAttribute("stroke-dasharray", pathB.getTotalLength());
pathB.setAttribute("stroke-dashoffset", pathB.getTotalLength());

pathC.setAttribute("stroke-dasharray", pathC.getTotalLength());
pathC.setAttribute("stroke-dashoffset", pathC.getTotalLength());

svg {
  display: block;
}

  <div>Path format set to Relative. <br/> Also has translate property accidently left over from Inkscape Program</div>
  <div>The only one that correctly hides in Safari</div>
  <svg xmlns="http://www.w3.org/2000/svg" width="278.7779" height="172.781" viewBox="0 0 73.76 45.715">
    <g fill="none" stroke="#00aad4" stroke-linecap="round">
      <path
        d="m 28.160858,82.187983 h 7.650572 l 2.617177,-10.690495 6.864897,25.620138 3.161464,-36.349135 3.960852,28.486407 1.112568,-6.93955 h 8.747067 l 1.276252,-7.39712 4.447672,23.966019 2.307643,-38.08671 1.613403,15.155399 h 7.50004 l 3.378248,16.804952 1.66252,-13.510699 h 15.694617"
        opacity=".165" stroke-width=".965" stroke-linejoin="round" transform="translate(-27.2784 -54.0512)" />
      <path class="path-A"
        d="m 28.160858,82.187983 h 7.650572 l 2.617177,-10.690495 6.864897,25.620139 3.161464,-36.349136 3.960852,28.486407 1.112568,-6.93955 h 8.747067 l 1.276252,-7.39712 4.447672,23.966019 2.307643,-38.08671 1.613403,15.155399 h 7.50004 l 3.378248,16.804952 1.66252,-13.510699 h 15.694617"
        stroke-width="1.765" stroke-linejoin="round" transform="translate(-27.2784 -54.0512)" />
    </g>
  </svg>
  <div>Path format set to Absolute</div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.76 45.715" height="172.781" width="278.7779">
    <g fill="none" stroke="#00aad4" stroke-linecap="round">
      <path
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
        opacity=".165" stroke-width=".965" stroke-linejoin="round" />
      <path class="path-B"
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
        stroke-width="1.765" stroke-linejoin="round" />
    </g>
  </svg>
  <div>Path format set to Relative</div>
  <svg xmlns="http://www.w3.org/2000/svg" width="278.7779" height="172.781" viewBox="0 0 73.76 45.715">
    <g stroke-linecap="round" stroke="#00aad4" fill="none">
      <path stroke-linejoin="round" stroke-width=".965" opacity=".165"
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" />
      <path class="path-C" stroke-linejoin="round" stroke-width="1.765"
        d="m 0.8825,28.1368 h 7.6506 l 2.6171,-10.6905 6.865,25.6202 3.1614,-36.3492 3.9609,28.4864 1.1125,-6.9395 h 8.7471 l 1.2762,-7.3971 4.4477,23.966 2.3077,-38.0867 1.6134,15.1554 h 7.5 l 3.3783,16.805 1.6625,-13.5108 h 15.6946" />
    </g>
  </svg>

在Safari上的屏幕截图

我尝试过的。

1. 用像素而不是数字设置stroke-dasharray和stroke-dashoffset。

在IOS 12.4.7和Safari 13.1.1上进行了测试

Answer 1

我认为问题与在stroke-dasharray方法中设置的stroke-dashoffset和getTotalLength()上的Safari和Edge（旧版）呈现十进制值有关。

Safari的修复程序是使用Math.ceil对值进行取整。

但是对于Edge（旧版），问题仍然存在，将笔画的其余部分放在路径的左侧

Edge的解决方案是在初始化时将笔划宽度设置为零，然后在笔划长度值发生变化（例如动画）时，将笔划宽度更改回其默认值demo example

    const pathA = document.querySelector(".path-A");
    const pathB = document.querySelector(".path-B");
    const pathC = document.querySelector(".path-C");
    let pathAStrokeWidth = 0
    let pathBStrokeWidth = 0
    let pathCStrokeWidth = 0

    pathA.setAttribute("stroke-dasharray", Math.ceil(pathA.getTotalLength()));
    pathA.setAttribute("stroke-dashoffset", Math.ceil(pathA.getTotalLength()));
    pathAStrokeWidth = pathA.getAttribute('stroke-width') 
    pathA.setAttribute("stroke-width", 0);

    pathB.setAttribute("stroke-dasharray", Math.ceil(pathB.getTotalLength()));
    pathB.setAttribute("stroke-dashoffset", Math.ceil(pathB.getTotalLength()));
    pathBStrokeWidth = pathA.getAttribute('stroke-width')
    pathB.setAttribute("stroke-width", 0);

    pathC.setAttribute("stroke-dasharray", Math.ceil(pathC.getTotalLength()));
    pathC.setAttribute("stroke-dashoffset", Math.ceil(pathC.getTotalLength()));
    pathCStrokeWidth = pathA.getAttribute('stroke-width')
    pathC.setAttribute("stroke-width", 0);
    

svg {
  display: block;
}

<div>Path format set to Relative. <br/> Also has translate property accidently left over from Inkscape Program</div>
  <div>The only one that correctly hides in Safari</div>
  <svg xmlns="http://www.w3.org/2000/svg" width="278.7779" height="172.781" viewBox="0 0 73.76 45.715">
    <g fill="none" stroke="#00aad4" stroke-linecap="round">
      <path
        d="m 28.160858,82.187983 h 7.650572 l 2.617177,-10.690495 6.864897,25.620138 3.161464,-36.349135 3.960852,28.486407 1.112568,-6.93955 h 8.747067 l 1.276252,-7.39712 4.447672,23.966019 2.307643,-38.08671 1.613403,15.155399 h 7.50004 l 3.378248,16.804952 1.66252,-13.510699 h 15.694617"
        opacity=".165" stroke-width=".965" stroke-linejoin="round" transform="translate(-27.2784 -54.0512)" />
      <path class="path-A"
        d="m 28.160858,82.187983 h 7.650572 l 2.617177,-10.690495 6.864897,25.620139 3.161464,-36.349136 3.960852,28.486407 1.112568,-6.93955 h 8.747067 l 1.276252,-7.39712 4.447672,23.966019 2.307643,-38.08671 1.613403,15.155399 h 7.50004 l 3.378248,16.804952 1.66252,-13.510699 h 15.694617"
        stroke-width="1.765" stroke-linejoin="round" transform="translate(-27.2784 -54.0512)" />
    </g>
  </svg>
  <div>Path format set to Absolute</div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.76 45.715" height="172.781" width="278.7779">
    <g fill="none" stroke="#00aad4" stroke-linecap="round">
      <path
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
        opacity=".165" stroke-width=".965" stroke-linejoin="round" />
      <path class="path-B"
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946"
        stroke-width="1.765" stroke-linejoin="round" />
    </g>
  </svg>
  <div>Path format set to Relative</div>
  <svg xmlns="http://www.w3.org/2000/svg" width="278.7779" height="172.781" viewBox="0 0 73.76 45.715">
    <g stroke-linecap="round" stroke="#00aad4" fill="none">
      <path stroke-linejoin="round" stroke-width=".965" opacity=".165"
        d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" />
      <path class="path-C" stroke-linejoin="round" stroke-width="1.765"
        d="m 0.8825,28.1368 h 7.6506 l 2.6171,-10.6905 6.865,25.6202 3.1614,-36.3492 3.9609,28.4864 1.1125,-6.9395 h 8.7471 l 1.2762,-7.3971 4.4477,23.966 2.3077,-38.0867 1.6134,15.1554 h 7.5 l 3.3783,16.805 1.6625,-13.5108 h 15.6946" />
    </g>
  </svg>