SVG clipPath剪切圖像的錯誤部分

Question

我想創建一個帶有圖像內的SVG圓。圖像應該位於SVG圓內，其半徑略低於外圓的半徑。要剪切圖像，我使用<image>元素上的<clipPath>元素。但是不會裁剪正確的道路。這裏是一個Codepen來舉個例子：

https://codepen.io/Martin36/pen/BdpMbX

正如你所看到的例子中<clipPath>剪輯圖像的左上角即使剪裁<circle>直接置於<image>元以上。這裏是代碼：

<svg width="900" height="300" > 
    <g class="hotel" transform="translate(150,150)"> 
    <circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;" class=""></circle> 
    <clipPath id="clipCircle"> 
     <circle r="100"></circle> 
    </clipPath> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" 
      xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg" 
      clip-path="url(#clipCircle)" 
      width="250" height="250" 
      transform="translate(-125,-125)">   
    </image> 
    </g> 
</svg> 

有誰知道爲什麼發生這種情況，以及如何解決它？

Answer 1

我通過改變<clipPath>標籤到image的width除以二內部的<circle>元件的cx和cy特性解決了這個問題。該codepen用正確的代碼更新。但我也會在這裏發佈：

<svg width="900" height="300" > 
    <g class="hotel" transform="translate(150,150)"> 
    <circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;"></circle> 
    <clipPath id="clipCircle"> 
     <circle r="100" cx="125" cy="125"> </circle> 
    </clipPath> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" 
      xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg" 
      clip-path="url(#clipCircle)" 
      width="350" height="250" 
      transform="translate(-125,-125)">   
    </image> 
    </g> 
</svg>