CODEWITHSUNDEEP
htmlcsssvg
Bucky208
Bucky208

Reputation: 86

SVG image as pattern - full width - keep ratio

I would like to create this type of separator:

Separator: The guy welding

But i cannot make it work, the image is never fully stretched or deforms or is a pattern...

The SVG shape:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 1024 1379.4" style="enable-background:new 0 0 1024 1379.4;" xml:space="preserve">
<polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341 "/>
</svg>

A SVG pattern (a tryout):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200" preserveAspectRatio="none">
      <defs>
        <pattern id="img4" patternUnits="userSpaceOnUse" width="100" height="100">
          <image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" x="0" y="0" width="100" height="100" />
        </pattern>
      </defs>
    <polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
    </svg>

https://jsfiddle.net/Bucky208/b3jhsem4/

This is with clippath (Not supported on edge and IE?!) and it also stretches on full witdh:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
       y="0px" viewBox="0 0 1024 1381.5" width="100%" height="800" style="enable-background:new 0 0 1024 1381.5;" xml:space="preserve" preserveAspectRatio="none">
    <style type="text/css">
      .st0{clip-path:url(#SVGID_2_);}
    </style>
    <g>
      <defs>
        <polygon id="SVGID_1_" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0    "/>
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
      </clipPath>
      <g class="st0">
        <defs>
          <rect id="SVGID_3_" x="-3.1" y="0" width="1030" height="1381.3"/>
        </defs>
        <clipPath id="SVGID_4_">
          <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
        </clipPath>
        <g style="clip-path:url(#SVGID_4_);">

            <image style="overflow:visible;" width="331" height="444" xlink:href="https://images.unsplash.com/photo-1507160634214-89e0baae2457?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9df168bddae101e185e697926806634f&auto=format&fit=crop&w=934&q=80"  transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)">
          </image>
        </g>
      </g>
    </g>
    </svg>

https://jsfiddle.net/Bucky208/3xvh8kn1/1/

The goal:

Kind regards

Upvotes: 0

Views: 2627

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Basically, all you have to do is set the appropriate preserveAspectRatio on your image. In this case, one with the keyword slice. SVG's slice is equivalent to the value cover for the background-size CSS property in HTML.

In the example, below, I do the following:

  1. Leave the pattern using the default patternUnits="objectBoundingBox" and set width and height to "1" so that our pattern covers the whole object.
  2. Set patternContentUnits="objectBoundingBox" and set the image width and height to "1" so that the image covers the whole shape.
  3. Set the image to us preserveAspectRatio="xMidYMid slice" so that the image is scaled up to cover the whole object bounding box.

Also, I changed the image to one that makes it more easy to tell that it is keeping its aspect ratio.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200">
  <defs>
    <pattern id="img4" patternContentUnits="objectBoundingBox" width="1" height="1">
      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"
             xlink:href="https://images.unsplash.com/photo-1520658402001-b5960f9a6059?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5670796b33630d3eff4b287840632a59&auto=format&fit=crop&w=1950&q=80"/>
    </pattern>
  </defs>
  <polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
</svg>

Upvotes: 3

Related Questions