d3 - <g>組元素高度

我試圖將圖像剪切成組內的一個圓。 d3 - <g>組元素高度

這裏是夾路徑代碼

<defs> 
    <clipPath id="empImgClip"> 
     <circle r="53" cy="55" cx="55"></circle> 
    </clipPath> 
</defs>

如鉻控制檯查看的SVG代碼

的問題，據我所知，是圓的，所述邊緣被<g></g>組元素粘貼，並且沒有正確顯示。我想出的一件事是增加<g>的高度並調整圈位置，但<g>根據其包裹的內容自動獲取其高度。

我希望圓形圖像出現在圓角的矩形的左上角，圓形圖像的中心恰好位於矩形的x0，y0處，以便圓形圖像在矩形外部的一半內半。

這是如何實現的。

更新

Gilsha寶貴意見後到clipPath圓CY和CX改變爲0，下面是結果。

來源

2016-10-18 ZedBee

元素不夾除非你附加了一個剪輯路徑給他們。 –

您是否有預期視圖的圖像？ – Gilsha

@Gilsha我只是不希望圈子被剪裁。 – ZedBee

的問題是不與該組元素。如果你想要的形象，在矩形的左上角被放置在問題中提到，您應該設置CX和夾路徑圈的CY屬性爲0

<svg> 
 
<defs> 
 
    <clipPath id="empImgClip"> 
 
     <circle r="53" cy="0" cx="0"></circle> 
 
    </clipPath> 
 
</defs> 
 
<g> 
 
<rect width=400 height=130 fill="#b4975a" stroke-width=1 stroke="#cccccc" rx=60></rect> 
 
<image height=110 width=110 href="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" clip-path="url(#empImgClip)"></image> 
 
</g> 
 
</svg>

來源

2016-10-19 10:17:08 Gilsha

謝謝.. Gilsha，但因爲如此可以看到整個圓圈不可見。我想讓整個圓圈可見。 – ZedBee

Plz檢查更新後的問題。 – ZedBee

d3 - <g>組元素高度

回答

相關問題