相关疑难解决方法(0)

如何使笔画宽度不受当前转换矩阵的影响

在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 postscript coordinate-transformation

36
推荐指数
2
解决办法
1万
查看次数

为什么SVG笔划宽度:1使线条透明?

我正在使用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 transparent width stroke

29
推荐指数
3
解决办法
2万
查看次数

如何在绝对线宽的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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

svg

3
推荐指数
1
解决办法
2878
查看次数