裁剪和缩放 SVG

Question

我正在尝试在另一个 SVG 中显示 SVG 的一部分（蓝色矩形覆盖的区域）并缩小尺寸。如果图像不被截断，我似乎无法让它工作。我能得到的最接近的是出现的图像的一半。知道我做错了什么吗？

    <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>

Answer 1

图片的自然大小是 400 x 400 像素，所以当它是一半大小时，您需要 200 x 200 canvas 才能完整显示它。

<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>

裁剪和缩放 SVG

Clipping and scaling an SVG

css

svg

clip-path