Question

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.

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">

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.

Do you have any idea where i am stucked?

Thanks in advance,

Tobi

EDIT1:

Here is a little example of my problem on jsfiddle:
http://jsfiddle.net/E3wBn/

EDIT2:

I used the advice from robertc and changed my example svg to this:

http://jsfiddle.net/2DKXn/

I also uploaded an example jpg which shows how it should look like later.

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

Answer 1

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>

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.

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.