在 svg 中画一个圆，保留纵横比= "none"

Question

我有一个svg与viewBox="0 0 100 100" preserveAspectRatio="none"，因为我需要绘制一些参考百分比的元素。

如果我现在画一个<circle cx="30" cy="50" r="0.5" stroke="white"/>虽然它也会被拉伸/扭曲

是否有办法告诉circle元素保留自己的宽高比?

Answer 1

如果你需要的只是一个圆圈，你可以使用一个很短，很宽的线，就像下面的例子。

• stroke-linecap="round"会产生圆圈的错觉，因为
• 中风可以采取vector-effect="non-scaling-stroke"。

non-scaling-stroke该值修改对象描边的方式。通常描边包括计算当前用户坐标系中形状路径的描边轮廓，并用描边油漆(颜色或渐变)填充该轮廓。此值的最终视觉效果是笔画宽度不依赖于元素的转换(包括非均匀缩放和剪切转换)和缩放级别。

div {
width: 300px;
height: 50px;
background-color: lime;
}
svg {
width:100%;
height:100%;
}

<div>
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<!--<circle cx="30" cy="50" r="20"></circle>-->
<line  x1="30" y1="50" x2="30.1" y2="50" stroke-width="40" stroke="black" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</div>

如果你也需要一个白色的描边，你可以在黑色的后面添加一个更大的描边宽度的白线

div {
width: 300px;
height: 50px;
background-color: lime;
}
svg {
width:100%;
height:100%;
}

<div>
<svg viewBox="0 0 100 100" preserveAspectRatio="none">

<line  x1="30" y1="50" x2="30.1" y2="50" stroke-width="45" stroke="white" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<line  x1="30" y1="50" x2="30.1" y2="50" stroke-width="40" stroke="black" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</div>