3

I'm playing around with SVGs and was working off of this example. However, in my jsbin the pattern isn't repeating for my <rect> elements.
And when I change the height and width attributes (no I'm not changing the x , y attributes) the rect svg objects just disappear when I enter in large values.
I'm just dipping my toe into SVGs so my knowledge is quite limited. I figure it is something simple but am not seeing what I'm doing incorrectly when I compare to what I'm doing to the grid2.svg that I'm going off of.

1 Answer 1

2

You've written this...

<pattern id="OvalPattern2" patternUnits="objectBoundingBox" width="70" height="70" >

With objectBoundingBox units 1 is the size of the shape using it. So your pattern is 70 times the size of the object using it. I suspect you want .7 as the width/height.

9
  • I changed the width/height on the pattern to 0.7, but for a rect of width/height of 140/70, I'd expect the pattern to repeat 2x. It isn't doing this. I'm getting whitespace in between the repeated patterns. Any thoughts? Jul 2, 2014 at 20:24
  • If you want the pattern to repeat twice then it's width/height must be 0.5 Jul 2, 2014 at 20:47
  • Hmm I think I'm confused and need a greater grasp of the difference between patternUnits="objectBoundingBox" and patternUnits="userSpaceOnUse" and usage of patternContentUnits. Switching to using userSpaceOneUse is solving the pattern auto repeating instead of worrying about sizing the pattern so it repeats the correct # of times in an element. As it stands my use case will have a set pattern repeat indefinitely. jsbin.com/dajix/2 <-- this jsbin shows me partially to where I want to be. I want that second <rect> to have the pattern start anew in it. Jul 2, 2014 at 21:20
  • With "objectBoundingBox", the value "1" represents the width (or height) of the element. So if width="0.5" and height="1" the fill would consist of two copies of the pattern (side-by-side). For width="0.5" height="0.5" you would get four copies of the pattern in a 2x2 arrangement. Does that make sense? Jul 3, 2014 at 4:27
  • 1
    Sounds like you want to use patternContentUnits="objectBoundingBox" too and adjust the pattern contents to use those units. Jul 3, 2014 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.