我正在嘗試在另一個 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>
uj5u.com熱心網友回復：
影像的自然大小是 400 x 400 像素，因此當它是大小的一半時，您需要一個 200 x 200 的畫布才能完全顯示它。
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442038.html
下一篇：有背景顏色時漸變不起作用