如何調整影像大小以適合圓形 SVG 遮罩？

調整影像大小以適合圓形SVG 路徑

嘗試使用SVG 路徑從影像中剪切圓形部分時，這一點很重要以確保正確對齊。如果圖像不太適合，可能是由於 SVG 蒙版的大小或位置不正確。

這是實現所需結果的替代方法：

使用增強SVG 蒙版：

此方法使用SVG 蒙版建立一個圓孔孔，在其中顯示圖像：

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"></circle>
      <circle r="50" cx="180" cy="180" fill="black"></circle>
    </mask>
    <pattern id="img" patternunits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200"></image>
    </pattern>
  </defs>
  <!-- Create a rect, fill it with the image and apply the mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg></code>

說明：

• #hole：這定義了包含兩個圓圈（一白一黑）的SVG蒙版。白色圓圈代表要顯示的區域，而黑色圓圈會建立一個遮罩來隱藏圓圈之外的區域。
• #img：SVG 模式使用影像定義模式。 patternUnits="userSpaceOnUse" 屬性可確保圖案拉伸以適合其所應用的形狀。
• rect 元素使用 #img 圖案填滿整個 SVG 容器，並套用 #hole 遮罩以顯示圓形切口。

使用這種增強的方法，影像現在應該正確地適合圓形 SVG 遮罩。

以上是如何調整影像大小以適合圓形 SVG 遮罩？的詳細內容。更多資訊請關注PHP中文網其他相關文章！