Clipping and scaling an SVG

Question

I'm trying to display a section of an SVG (area covered in blue rectangle) in another SVG and reduce the size. I can't seem to get it to work without the image being cut-off. The closest I could get was half the image to appear. Any idea what I'm doing wrong?

    <html>
    
    <body>
      <svg style="width:400px;height:400px;">
        <image width="400" height="400" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
        <rect x="115" y="30" width="202" height="355" fill="rgba(0,0,255,0.5)" stroke-width="5" stroke="black"></rect>
        <defs>
            <clipPath id="shape">
                <rect x="115" y="30" width="202" height="355" fill="rgba(0,0,255,0.5)" stroke-width="5" stroke="black"></rect>
            </clipPath>
        </defs>
    </svg>
    
      <svg style="width:101px;height:178px;">
    <image x="0" y="0" style="transform: scale(0.5);" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
    </svg>
    </body>
    
    </html>

Why is it two SVG elements. Would it be OK just to have one? And what should the end result look like - the problem is not 100 % clear to me. — chrwahl, Mar 12 '22 at 15:35
Thanks for quick responses and taking a look. The end result should look like result of running Robert Longson's solution in the next post. It needs to be a separate SVG as the plan is add a bunch of other elements/contents in between. — PhoenixDown, Mar 12 '22 at 16:15

score 0 · Accepted Answer · answered Mar 12 '22 at 15:38

The natural size of the image is 400 x 400 pixels so when it's half the size you need a 200 x 200 canvas to display it completely.

<html>
    
    <body>
      <svg style="width:400px;height:400px;">
        <image width="400" height="400" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
        <rect x="115" y="30" width="202" height="355" fill="rgba(0,0,255,0.5)" stroke-width="5" stroke="black"></rect>
        <defs>
            <clipPath id="shape">
                <rect x="115" y="30" width="202" height="355" fill="rgba(0,0,255,0.5)" stroke-width="5" stroke="black"></rect>
            </clipPath>
        </defs>
    </svg>
    
      <svg style="width:200px;height:200px;">
    <image style="transform: scale(0.5);" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" />
    </svg>
    </body>
    
    </html>

Thanks! This makes sense now. I was originally setting the SVG to match the clip dimensions. — PhoenixDown, Mar 12 '22 at 16:20

Clipping and scaling an SVG

1 Answers1