Question

我有一个简单的SVG，需要水平响应。矩形（和SVG）应扩展到宽度的100％，但圆的直径始终应为10px。圆圈也应在水平轴上均匀分布（0％，33％，66％，100％）

要想使事情顺利进行，这是基本的SVG（尚无响应。）

<svg height="10" xmlns="http://www.w3.org/2000/svg">
  <g fill="#333" fill-rule="evenodd">
    <rect y="3" width="245" height="4" rx="2"/>
    <circle cx="5" cy="5" r="5"/>
    <circle cx="80" cy="5" r="5"/>
    <circle cx="160" cy="5" r="5"/>
    <circle cx="240" cy="5" r="5"/>
  </g>
</svg>

我还在https://codepen.io/anon/pen/GBNadz上设置了Codepen

关于从哪里开始的任何提示？ SVG有可能吗？

Answer 1

您可以使用unit identifiers指定坐标和长度。写入function foo() { console.log(this.constructor.name) } foo()和Window是等效的。您不能做的是使用CSS cx="5"函数；还有一些特殊属性，例如cx="5px"和calc()，它们看起来像定义了长度值，但实际上没有。对于您的用例，您需要将外部点稍微移到中间，结合百分比坐标和无单位viewBox可以达到目的。

transform

在SVG中使用不同的单位

1 个答案: