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

时间:2012-10-24 14:42:14

标签: svg

我的应用程序生成一组要在SVG中绘制的图形点。点值始终在水平和垂直方向上为0-1000。绘图发生的矩形大小可能会发生变化。

这是在200 X 85 rect上绘制图形的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 1000"会使图形缩小到合适的大小,问题是这也会以相同的比例缩小线条的宽度,因此该线条不再可见。

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

有没有办法用绝对像素大小指定线宽(笔画宽度)?

1 个答案:

答案 0 :(得分:7)

您可以使用属性vector-effect="non-scaling-stroke"来阻止线条与其余部分进行缩放。

参考:http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

  

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

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