此示例繪製兩個圓圈在一個盒子的尺寸10×10如何使SVG中的元素不被視框拉長?
<svg width="10" height="10" viewbox="0 0 10 10">
<circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
<circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>
圓A具有相同的尺寸的圓B.假設我要調整大小的SVG到100×100像這樣:
<svg width="100" height="100" viewbox="0 0 10 10">
<circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
<circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>
圓圈的大小將調整大小。如何在svg中製作特定的元素,讓我們只說圈A,這樣它就不會受到調整大小的影響。
使用兩個svg元素,其中一個沒有viewBox。使用CSS定位將它們放在彼此之上。 –
@RobertLongson我可以使用這個解決方案,但它需要調整我的cx和cy對象取決於svg的寬度和高度,不是嗎?有更好的解決方案嗎?因爲我的實際代碼很複雜 – smftr
我不知道你的第一句話是什麼意思。 –