SVG clipPath 裁剪图像的错误部分答案

【问题标题】：SVG clipPath clipping wrong part of imageSVG clipPath 裁剪图像的错误部分
【发布时间】：2017-08-07 19:47:51
【问题描述】：

我正在尝试创建一个带有图像的 SVG 圆圈。图像应该位于 SVG 圆内，半径略低于外圆的半径。为了剪辑图像，我在<image> 元素上使用了<clipPath> 元素。但是不会剪辑正确的路径。下面是一个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>

有谁知道为什么会发生这种情况以及如何解决它？

【问题讨论】：

标签： html svg

【解决方案1】：

我通过将<clipPath> 标记内的<circle> 元素的cx 和cy 属性更改为image 的width 除以2，解决了这个问题。使用正确的代码更新 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>

【讨论】：