CODEWITHSUNDEEP
htmlcsssvg
Corey Bush
Corey Bush

Reputation: 183

Keeping background image dimensions in SVG shape pattern background

Working on trying to get background images to cover SVG shapes...

As of right now, I'm trying to use patterns with width and height set to 100% and patternContentUnits="objectBoundingBox"... It works as a background to the SVG shape, but it distorts the background image a bit. Is there a way to get it to "cover" the background without distorting the background image?

https://codepen.io/Finches/pen/MQGdmO

<pattern id="diamond1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://images.pexels.com/photos/614969/pexels-photo-614969.jpeg?h=350&auto=compress&cs=tinysrgb" />

<g class="diamond-group diamond-group-1">
   <polygon class="diamond-1 diamond" fill="url('#diamond1')" points="260.1,131 131.6,259.6 3,131 131.6,2.4 "/>
   <polygon class="diamond-overlay" points="260.1,131 131.6,259.6 3,131 131.6,2.4 "/>
   <text class="diamond-text pointer" text-anchor="middle" x="130" y="130">ABOUT US</text>
</g>

Any help?

Upvotes: 1

Views: 43

Answers (1)

nvioli
nvioli

Reputation: 4209

In the image element, change preserveAspectRatio="none" to preserveAspectRatio="xMidYMid slice", or another setting that preserves aspect ratio:

https://codepen.io/anon/pen/WzbvZY

I only changed #diamond3 because that's the image where I could most clearly see the distortion.

Upvotes: 2

Related Questions