SVG clipPfad clipping falscher Teil des Bildes

Question

Ich versuche einen SVG-Kreis mit einem Bild darin zu erstellen. Das Bild sollte sich innerhalb des SVG-Kreises mit einem Radius befinden, der geringfügig unter dem Radius des äußeren Kreises liegt. Um das Bild zu schneiden verwende ich das <clipPath> Element auf dem <image> Element. Aber wird nicht den richtigen Weg schneiden. Hier ist ein Codepen ein Beispiel zu geben:

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

Wie Sie im Beispiel der <clipPath> streift die linke obere Ecke des Bildes sehen kann, auch wenn das Clipping <circle> direkt über das <image> Element platziert wird. Hier ist der Code:

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

Weiß jemand, warum das passiert und wie es zu beheben?

Answer 1

löste ich das Problem durch die cx und cy Eigenschaften des <circle> Element innerhalb des <clipPath> tag zum width des image ändert durch zwei geteilt. Der Codepen wird mit dem richtigen Code aktualisiert. Aber ich werde es auch hier posten:

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