问题描述
目前我与SVG图形一起显示拼接的地图。
当我尝试绘制矩形或路径与模式（图片）作为背景，模式将不使用绘制矩形/路径的局部坐标系，但全球性的。
at the moment i am working with svg graphics to display a "map" of a splice. When i try to draw rectangles or paths with a pattern (image) as a background, the pattern won't use the local coordinate system of the drawn rect/path, but the global one.
这是我如何定义SVG-文档中的一个模式：
This is how i define a pattern in the svg-document:
<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>
这是我如何应用模式的路径：
This is how i apply the pattern to a path:
<path style="fill: url(#black_h)" d="M324 0 L324 375 L348 375 L348 0">
因此，我期望的行为是，该图案在通路的左上角开始，并重复其本身在两个方向上。但在我的例子模式开始在SVG文档的左上角，所以只路径看起来不错，当Y-坐标是24的倍数。
So the behaviour i would expect is, that the pattern starts at the top left corner of the path and repeats itself in both directions. But in my example the pattern starts at the top left corner of the svg document, so the path only looks good, when the y-coord is a multiple of 24.
你有我在哪里stucked任何想法？
Do you have any idea where i am stucked?
由于提前，
托比
EDIT1：
下面是我对的jsfiddle问题的一个小例子：
Here is a little example of my problem on jsfiddle:http://jsfiddle.net/E3wBn/
EDIT2：
我从robertc使用的建议和改变了我的例子SVG这样：
I used the advice from robertc and changed my example svg to this:
我还上传了一个例子JPG格式，显示应该如何看起来像更高版本。
I also uploaded an example jpg which shows how it should look like later.
推荐答案
相关的属性和值是<$c$c>patternContentUnits=\"objectBoundingBox\",但它可能不会做的正是你所期望的。当您指定该值，你必须调整你使用的东西像这样的坐标：
The relevant attribute and value is patternContentUnits="objectBoundingBox", but it may not do exactly what you expect. When you specify this value you have to adjust the co-ordinates you're using to something like this:
<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>
一切都会然后得到缩减到装配到它施加到该对象。我没有访问用于这样的形象，我无法到C直接测试上述$ C $，但我做了的。需要注意的是，这种方法你基本上有固定数量的重复，而不是一个固定大小的图像拼接结束了。
Everything will then get scaled back up to fit into the object it's applied to. I don't have access to the image you used so I wasn't able to test the above code directly, but I made this similar example. Note that with this approach you basically end up with a fixed number of repetitions rather than a fixed sized image tiling.
有的更长的写了起来，我把从文章到此的jsfiddle ，以允许简单的实验。
There's a longer write up of SVG patterns on Mozilla Developer Network, I put two examples from that article into this JSFiddle to allow for easy experimentation.
这篇关于SVG背景图案是使用全局，而不是局部坐标系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！