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

Posted 2023-02-23

【中文标题】SVG 背景图案使用全局而非局部坐标系

【英文标题】：SVG background pattern is using global and not local coordinate system

【发布时间】：2012-09-09 20:21:06

【问题描述】：

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

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

<defs>
    <pattern preserveAspectRatio="true" patternUnits="userSpaceOnUse"   y="0" x="0" id="black_h">
         <image   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

【参考方案1】：

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

<defs>
    <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox"   y="0" x="0" id="black_h">
         <image   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，方便实验。

【讨论】：

好的，谢谢。我现在就试试。仅供参考：我准备了一个 svg jsfiddle.net/E3wBn

的小例子

所以。我按照你的方法试过了，现在看起来好多了，但似乎没有重复图像。 jsfiddle.net/2DKXn

@TobiasKun 就像我在回答中所说的，你只能有固定的重复次数，它不像 html 背景那样平铺。

【参考方案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>

它就像一个魅力:)

感谢大家的建议和帮助！