CODEWITHSUNDEEP
imagesvg
DauntlessRob
DauntlessRob

Reputation: 795

Getting a large image to pattern an SVG

So, I have an SVG that I'm trying to create as a kindof angled bar across the screen. But I want it to have a patterned background. I've got three patterned backgrounds here, but only the tiny one works. What gives?

    <svg class="bAngle1" width="100%" height="800">
        <defs>
            <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">
                <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
            </pattern>
            <pattern id="beaconWords" x="0" y="0" width="1020" height="537" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
                <image preserveAspectRatio="none" width="1020" height="537" xlink:href="http://173.254.99.45/~b/words.png"></image>
            </pattern>
        </defs>
      <polygon points="2600,0 2600,800 0,500 0,300" fill="url(#beaconWords)"/>
    </svg>

In JSFiddle: http://jsfiddle.net/2pwr8wo0/

It seems like the PNG is zoomed in or something, but I can't figure out how to fix it.

Upvotes: 0

Views: 39

Answers (1)

Robert Longson
Robert Longson

Reputation: 124209

You're using patternContentUnits="objectBoundingBox" when from the sizes of the content values I'm sure you need patternContentUnits="userSpaceOnUse" That change fixes it for me.

Edit: working jsFiddle

Upvotes: 1

Related Questions