SVG：模式内的非缩放笔画不起作用？答案

【问题标题】：SVG: non-scaling-stroke inside pattern doesn't work?SVG：模式内的非缩放笔画不起作用？
【发布时间】：2013-03-13 00:10:09
【问题描述】：

在模式中使用 vector-effect="non-scaling-stroke" 时，我在 Firefox 或 Chrome 中没有得到预期的结果，尽管 Opera 按预期工作...

例子：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px">
<defs>
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%">
        <path stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" />
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#ticks)" />

Screenshot of results in Firefox, Chrome and Opera

是我做错了什么，还是 WebKit 和 Gecko 中的错误？如果是错误，是否有人知道解决方法？

感谢您的帮助。

【问题讨论】：

你定义了笔画宽度吗？
另见stackoverflow.com/questions/10473328/…。由于模式不在 SVG Tiny 1.2 中，因此未定义非缩放笔画应该如何在那里工作，我认为 SVG2 也没有定义。

标签： svg

【解决方案1】：

我没有 Opera 来测试这个解决方案，但它似乎在 Chrome 和 Firefox 上获得了预期的结果。

@galdre 是对的。您需要定义stroke-width（下面分配了0.1 的值）。另外，你错过了一个结束</svg>：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px">
    <defs>
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%">
        <path stroke-width="0.1" stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" />
    </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#ticks)" />
</svg>

【讨论】：

笔画宽度应该是1px，这是默认的，因此是多余的。
我明白了。好吧，上面的代码似乎确实符合您的要求 (screenshot)。我不确定这种行为是否是错误的结果。
非常正确...以上只是一个使失败显而易见的示例。如果将行程更改为 0.1，则只会使失败变得不那么明显。即使笔画宽度为 0.1，如果将宽度更改为 3000 像素（线条太粗）或 300 像素（线条太细），您仍然可以看到笔画正在调整大小。
你是对的，但 Opera 屏幕截图看起来也是如此（尽管如果没有安装浏览器我无法完全确认）。
Opera 会根据需要将边框渲染为 1px，无论宽度设置为多少。我说“是”是因为现在他们已经切换到 Blink，最新版本很可能会像 Chrome 一样呈现它。