如何使SVG中的元素不被視框拉長？

此示例繪製兩個圓圈在一個盒子的尺寸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，這樣它就不會受到調整大小的影響。

來源

2017-02-16 smftr

使用兩個svg元素，其中一個沒有viewBox。使用CSS定位將它們放在彼此之上。 –

@RobertLongson我可以使用這個解決方案，但它需要調整我的cx和cy對象取決於svg的寬度和高度，不是嗎？有更好的解決方案嗎？因爲我的實際代碼很複雜 – smftr

我不知道你的第一句話是什麼意思。 –

我做了另一個樣本。我使用嵌套的svg元素來分割viewBox的效果。您可以通過使用百分比值來放置形狀節點的相對位置，但是此技術對於一般路徑形狀無用。因爲，我使用「使用」元素來分割形狀定義和定位。

<svg width="100" height="100"> 
    <defs> 
     <!--shape definition--> 
     <circle r="2" fill="red" id="circleA"/> <!-- circle A--> 
    </defs> 
    <!--parcentage positioning by viewport--> 
    <use x="20%" y="20%" xlink:href="#circleA"/> 
    <svg viewBox="0 0 10 10"> 
     <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
    </svg> 
</svg>

來源

2017-02-17 01:55:40 defghi1977

謝謝你，這是我需要的 – smftr

你的意思是這樣嗎？

<svg width="100" height="100" viewbox="0 0 10 10"> 
    <rect x="2" y="2" width="0.001" height="0.001" 
     stroke="red" stroke-width="4" stroke-linejoin="round" 
     vector-effect="non-scaling-stroke"/> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

但我不知道每個瀏覽器都支持矢量效果屬性。

來源

2017-02-16 21:28:48 defghi1977

是否有任何屬性，例如'vector-effect =「非縮放寬度和筆劃」？當svg寬度和高度發生變化時，矩形的大小會縮放。 – smftr

沒有UA執行任何其他矢量效果。 –

如何使SVG中的元素不被視框拉長？

回答

相關問題