Fatal编程技术网
  • svg/
  • 在SVG中使用不同的单元

在SVG中使用不同的单元

svg

在SVG中使用不同的单元,svg,Svg,我有一个简单的SVG，我需要使其水平响应。矩形（和SVG）应扩展到宽度的100%，但圆的直径应始终为10px。圆圈也应均匀分布在水平轴上（0%、33%、66%、100%） 要想在这里取得进展，基本的SVG（还没有响应能力…） 我还设置了一个代码笔 关于从哪里开始有什么建议吗？SVG可以这样做吗？您可以使用它来指定坐标和长度。书写cx=“5”和cx=“5px”是等效的。您不能使用CSScalc（）函数；还有一些特殊属性，如viewBox和transform，看起来它们定义了长度值，但实际上并没

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

要想在这里取得进展，基本的SVG（还没有响应能力…）
我还设置了一个代码笔

关于从哪里开始有什么建议吗？SVG可以这样做吗？

您可以使用它来指定坐标和长度。书写
cx=“5”
和
cx=“5px”
是等效的。您不能使用CSS
calc（）
函数；还有一些特殊属性，如
viewBox
和
transform
，看起来它们定义了长度值，但实际上并没有。对于您需要将外部点稍微移到中间的用例，百分比坐标和无单位
transform=“translate（…）
的组合起到了作用

您必须有两个svg，一个是响应的，另一个不是用于静态循环，或者使用javascript动态调整循环大小。 
<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>