Question

我正在尝试创建一个SVG圈，里面有一个图像。图像应该在SVG圆内，半径略低于外圆的半径。要剪切图像，我使用<clipPath>元素上的<image>元素。但是不会削减正确的道路。这是Codepen的一个例子：

正如您在示例中看到的那样，即使裁剪<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

我通过将cx标记内的cy元素的<circle>和<clipPath>属性更改为{{1}的width来解决了该问题除以二。使用正确的代码更新codepen。但我也会在这里发布：

image

SVG clipPath剪裁错误的图像部分

1 个答案: