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

Question

目前我正在使用svg图形来显示拼接的"地图".当我尝试绘制带有图案(图像)作为背景的矩形或路径时,该图案将不使用绘制的rect/path的局部坐标系,而是使用全局坐标系.

这是我在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-coord是24的倍数时,路径看起来很好.

你知道我被困在哪里吗？

提前致谢,

托比

EDIT1:

这是我在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>

然后,所有东西都会缩小,以适应它所应用的对象.我无法访问您使用的图像,所以我无法直接测试上面的代码,但我做了类似的例子.请注意,使用此方法,您基本上会得到固定数量的重复,而不是固定大小的图像平铺.

还有的SVG图形在Mozilla开发者网络更长的写了,我把两个例子从文章到这的jsfiddle,使其易于实验.