SVG clipPath剪切图像的错误部分

Question

我正在尝试创建一个带有图像的SVG圆。 图像应该位于SVG圆的内部，其半径略小于外圆的半径。 要剪辑图像，我正在使用<clipPath>元素上的<image> <clipPath> <image>元素。 但是不会正确的道路。 这是Codepen的示例：

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

从示例中可以看到，即使将<circle>剪切放置在<image>元素的正上方， <image> <clipPath>也会剪切图像的左上角。 这是代码：

<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>标记内的<clipPath> <circle>元素的cx和cy属性更改为image width除以2来解决了该问题。 将用正确的代码更新代码笔。 但我也会在这里发布：

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