Question

我正在使用一个SVG，我不希望在调整大小时让<circle>的笔划缩放。将vector-effect="non-scaling-stroke"添加到<circle>时会发生的情况是，现在圆周基于视口，而不是原始 viewBox 。这是一个问题，因为在动画中使用stroke-dasharray时，它会引用错误的圆周。

以下代码段显示stroke-dasharray设置为两个相同大小圆圈的圆周，右侧圆圈显示问题（使用视口;有效地将其圆周加倍）：

＆＃13;

svg {
  width: 400px;
  height: auto;
  fill: none;
  stroke: #000;
  stroke-width: 6;
  stroke-dasharray: 252
}

＆＃13;

<body>

  <svg viewBox="0 0 200 100">

    <circle cx="50" cy="50" r="40" />

    <circle cx="150" cy="50" r="40" vector-effect="non-scaling-stroke" />

  </svg>

</body>

＆＃13;

有没有办法告诉<circle>尊重viewBox而不是视口？

Answer 1

当您指定非缩放笔划时会发生这种情况：它＆＃34;不缩放＆＃34; ＆＃34;破折号＆＃34;在中风以及中风本身。如果你有一个普通的笔画短划线阵列（而不是用它作为动画黑客） - 这就是你想要的行为:)目前没有办法为短划线阵列计算指定不同的坐标系，所以javascript是你的朋友。

svg with＆＃34; non-scaling-stroke＆＃34;忽略视口并使用其视口

1 个答案: