我有两个几乎相同的代码片段,其中一个圆形的右半部分应根据矩形进行裁剪。在第一个示例中,一切都很顺利:
<svg>
<clipPath id="cut">
<rect width="100" height="100" x="100" y="50"></rect>
</clipPath>
<circle class="consumption" cx="100" cy="100" clip-path="url(#cut)" r="50"></circle>
</svg>
在第二个例子中,当我使用圆的平移来指定其位置时,再也没有显示出来了。
<svg>
<clipPath id="cut">
<rect width="100" height="100" x="100" y="50"></rect>
</clipPath>
<circle class="consumption" transform="translate(100,100)" clip-path="url(#cut)" r="50"></circle>
</svg>
为什么?
rect
相对于circle
翻译后位置的x和y位置:http://jsfiddle.net/fA9y4/4/ - grssnbchr