Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/macos/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在SVG中以绝对线宽绘制多边形?_Svg - Fatal编程技术网

如何在SVG中以绝对线宽绘制多边形?

如何在SVG中以绝对线宽绘制多边形?,svg,Svg,我的应用程序生成一组要在SVG中绘制的图形点。点值在水平和垂直方向上始终在0-1000范围内。进行绘图的矩形的大小可能会更改 以下是在200 X 85矩形上绘制图形的SVG元素: <svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none"> <polyline stroke="#e69800" stroke-width="2px"

我的应用程序生成一组要在SVG中绘制的图形点。点值在水平和垂直方向上始终在0-1000范围内。进行绘图的矩形的大小可能会更改

以下是在200 X 85矩形上绘制图形的SVG元素:

<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <polyline  stroke="#e69800"
               stroke-width="2px"
               fill="none"
               points="0,1000 100,900 200,800
                       300,700 400,600 500,500
                       600 400 700,300 800,200900,100 1000,0"/>
</svg>

设置
viewBox=“0 0 1000”
会使图形缩小到适当的大小,问题是这也会以相同的比例缩小线条的宽度,因此线条不再可见

SVG似乎忽略了属性
stroke width=“2px”
中的“px”


有没有办法以绝对像素大小指定线条的宽度(笔划宽度)?

您可以使用属性
vector effect=“non scaling stroke”
来防止线条与其他线条一起缩放

参考:

此修改产生的视觉效果是笔划宽度 不依赖于元素的转换(包括 非均匀缩放和剪切变换)和缩放级别


SVG1.1似乎不支持非缩放笔划,因此最终结果可能取决于渲染引擎。

可能会看到这个问题:是的,这就成功了。我添加了属性
vector effect=“non-scaling stroke”
,现在这条线有2个像素宽,并且使用抗锯齿绘制,因此看起来不错@琼·查曼特:如果你把这个作为回答,我会接受的。谢谢Chrome和Firefox可以很好地使用,但IE(IE9和IE10)不能。