3

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

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

编辑2：

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

http://jsfiddle.net/2DKXn/

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

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

4

2 回答 2

8

相关的属性和值是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>

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

在 Mozilla Developer Network 上有一篇关于 SVG 模式的较长文章，我将那篇文章中的两个示例放入这个 JSFiddle以方便实验。

于 2012-09-18T11:49:39.947 回答
0

行。这个问题的一个可能的解决方案是为每个模式创建一个 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>

它就像一个魅力:)

谢谢大家的建议和帮助！

于 2012-09-19T10:14:31.403 回答