background - SVG 背景图案使用全局而非局部坐标系

Question

目前我正在使用 svg 图形来显示拼接的“ map ”。 当我尝试以图案(图像)为背景绘制矩形或路径时，该图案不会使用绘制的矩形/路径的局部坐标系，而是使用全局坐标系。

这就是我在 svg 文档中定义模式的方式:

<defs>
    <pattern preserveAspectRatio="true" patternUnits="userSpaceOnUse" height="24" width="50" y="0" x="0" id="black_h">
         <image height="24" width="50" y="0" x="0" xlink:href="http://newlini.lokal/img/svg/black_h.png"/>
    </pattern>
</defs>

这就是我将模式应用到路径的方式:

<path style="fill: url(#black_h)" d="M324 0 L324 375 L348 375 L348 0">

所以我期望的行为是，模式从路径的左上角开始，并在两个方向上重复。但在我的示例中，模式从 svg 文档的左上角开始，因此只有当 y 坐标是 24 的倍数时，路径才会看起来不错。

你知道我卡在哪里了吗？

提前致谢，

托比

编辑1:

这是我在 jsfiddle 上的问题的一个小例子: http://jsfiddle.net/E3wBn/

EDIT2:

我使用了 robertc 的建议并将我的示例 svg 更改为:

http://jsfiddle.net/2DKXn/

我还上传了一个示例 jpg，它显示了它以后的样子。

http://www.img-share.net/uploads/oi1IcdPBVk.jpg

Answer 1

相关属性和值是patternContentUnits="objectBoundingBox" ，但它可能不会完全符合您的预期。当您指定此值时，您必须将您正在使用的坐标调整为如下所示:

<defs>
    <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="0.5" width="1" y="0" x="0" id="black_h">
         <image height="0.5" width="1" y="0" x="0" xlink:href="http://newlini.lokal/img/svg/black_h.png"/>
    </pattern>
</defs>

然后，所有内容都会按比例放大以适应它所应用的对象。我无权访问您使用的图像，因此无法直接测试上述代码，但我制作了 this similar example .请注意，使用这种方法，您基本上会得到固定数量的重复，而不是固定大小的图像平铺。

有a longer write up of SVG patterns on Mozilla Developer Network ，我把那篇文章中的两个例子放到this JSFiddle以便于进行实验。