在SVG(和Canvas,Quartz,Postscript,...)中,变换矩阵影响路径坐标和线宽.有没有办法进行调整,以便线宽不受影响?也就是说,在下面的例子中,X和Y的比例是不同的,这使得正方形成为一个矩形,这是正常的,但它也使得两边的线条更宽.
<g transform="rotate(30) scale(5,1) ">
<rect x="10" y="10" width="20" height="20"
stroke="blue" fill="none" stroke-width="2"/>
</g>
Run Code Online (Sandbox Code Playgroud)

我可以看到这在许多情况下都很有用,但有没有办法选择退出呢?我想我想要一个单独的笔TM或者能够将笔设置为CTM转换为圆形的椭圆,但我没有看到类似的东西.
缺乏这一点,我想我不得告诉SVG关于我的CTM而是自己转换坐标,这意味着将基元转换rect成它们的path等价物.
我正在使用svg创建股票图表,当我将路径元素的笔触宽度设置为1时,我遇到了问题.而不是使线条更窄,它只是使它与笔划宽度相同:2但略透明.我不能发布它的图像,因为我没有足够的声誉点...
我的svg标签看起来像这样:
<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
Run Code Online (Sandbox Code Playgroud)
我正在使用javascript/jquery动态添加路径元素:
var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
"fill":"none",
"stroke":color,
"stroke-width":"1"});
$("svg").append(shape);
Run Code Online (Sandbox Code Playgroud)
我省略了路径d属性的值,因为它有点长.此外,color是一个字符串变量,它在前面确定为"绿色","红色"或"黑色".
我的代码中是否存在导致此问题的错误或是否是另一个问题?
我的应用程序生成一组要在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>
Run Code Online (Sandbox Code Playgroud)
设置viewBox="0 0 1000 1000"使图形缩小到适当的大小,问题是这也会以相同的比例缩小线条的宽度,因此该线条不再可见.
SVG似乎忽略了属性中的"px" stroke-width="2px".
有没有办法用绝对像素大小指定线宽(笔画宽度)?