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>

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

有a longer write up of SVG patterns on Mozilla Developer Network，我将该文章中的两个例子放入this JSFiddle，以便进行简单的实验。

Answer 2

确定。解决此问题的一种可能方法是为每个模式创建一个svg，然后将其包含在“main”svg中。我从未尝试过，但也许这适合。

然而，由于时间压力，我们（设计师和我）决定使用LinearGradients：

<linearGradient id="black_h" y2="100%" x2="0%" y1="0%" x1="0%">
     <stop style="stop-color:#555555;stop-opacity:1" offset="0%">
     <stop style="stop-color:#1E1E1E;stop-opacity:1" offset="100%">
</linearGradient>

它就像一个魅力：）

感谢大家的建议和帮助！

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

2 个答案: