Question

我有一个格式为的SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

当我希望图像以0.5px边框显示时，图像会显示一个巨大的黑色边框。如何在变换后应用笔触宽度？如果这是不可能的，那么包装元素以便正确显示的最简单方法是什么？我想避免修改“d”属性。

Answer 1

你可以使用vector-effect =“non-scaling-stroke”

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path vector-effect="non-scaling-stroke" d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

有一点需要注意，IE9 / 10并没有实现这一点，但是Webkit，Opera和Firefox都是这样做的。

如何在路径转换后设置路径宽度？

1 个答案: