Question

我正在尝试使用CSS在我的网页上为我的CSS应用相同的笔触宽度：

path {
  fill: none;
  stroke-width: 10pt;
  stroke: red;
}

然而，某些SVG的渲染完全不同。以下是一个示例：http://jsfiddle.net/kaoo1jdb/

应该很简单，但事实并非如此。我猜它是由于缩放效果，但我不知道如何解决它。

有没有人有任何想法？

非常感谢

Answer 1

两个SVG的视箱完全不同......一个是另一个的7倍。

所以....要获得相同的效果，你必须使用相同的乘数作为px大小（至少作为临时步骤等待其他选项）

JSfiddle

#A path {
  fill: none;
  stroke-width: 10;
  stroke: red;
}

#B path {
  fill: none;
  stroke-width: 70;
  stroke: red;
}

svg {
    width:128px;
    height:128px;
}

您可以通过更多研究来了解其他可能产生类似效果的内容。

有用的Article/tutorial

编辑：快速谷歌给了我这个属性：

 vector-effect:non-scaling-stroke;

参考Link

JSfiddle Demo 2

path {
  fill: none;
  stroke-width: 1;
  stroke: red;
  vector-effect:non-scaling-stroke;
}

SVG - 不同svg项目的不同笔画宽度

1 个答案: