支持百分比單位的SVG多邊形點

我想要一個可以輕鬆調整大小的流體SVG畫布。到目前爲止，我使用的是百分比。但是，似乎SVG polygon和path s不支持point屬性中的百分比。如果我開始改變號碼points屬性百分數失敗，並在控制檯解析錯誤支持百分比單位的SVG多邊形點

(jsFiddle)

<svg width='90%' height='90%' style='background-color: whitesmoke'> 
    <rect x='40%' y='40%' width='25%' height='25%' /> 

    <polygon points="0,0 0,100 30,20 30,0" /> 
    <polygon points="30,0 30,20 60,0 60,0" /> 
    <polygon points="60,0 60,0 90,30 90,0" /> 
</svg>

但是：下面是一個例子。我正在尋找一種方法來獲得可以使用<svg>元素調整大小的多邊形。

來源

2013-07-06 Ahmet Alp Balkan

可能重複[如何在ems中縮放SVG多邊形？]（http://stackoverflow.com/questions/8515524/how-do-i-scale-an-svg-polygon-in-ems） –

通過使用視框，我想你可以實現你要找的影響（無論什麼大小）的容器元素：http://jsfiddle.net/davegaeddert/WpeH4/

<div id="svg-container" style="width:100%;height:100%;"> 
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'> 
     <rect x='40%' y='40%' width='25%' height='25%' /> 

     <polygon points="0,0 0,100 30,20 30,0" /> 
     <polygon points="30,0 30,20 60,0 60,0" /> 
     <polygon points="60,0 60,0 90,30 90,0" /> 
    </svg> 
</div>

如果你給視框的大小爲0 0 100 100那麼點可以這樣寫百分比和形狀將與SVG規模。

來源

2014-07-22 22:11:03 davegaeddert

太棒了，但不幸的是線的大小（筆畫寬度）也得到了延伸） – FlorianB

@FlorianB - 屬性vector-effect =「non 「縮放筆畫」應該可以解決這個問題。 –

太棒了，但它保持它作爲一個sqare權利？當您想要全屏顯示時（大部分時間是水平比率），是否有解決方案？ –

可以組合在一起的元素與g並使用變換：

<svg width='90%' height='90%' style='background-color: whitesmoke'> 
    <rect x='40%' y='40%' width='25%' height='25%' /> 

    <g transform="scale(0.4 0.4)"> 
     <polygon points="0,0 0,100 30,20 30,0"/> 
     <polygon points="30,0 30,20 60,0 60,0"/> 
     <polygon points="60,0 60,0 90,30 90,0"/> 
    </g> 
</svg>

來源

2013-07-06 03:16:14 simonzack

這沒有幫助。最後，您將一個90像素寬的多邊形組縮放爲45像素的固定數字。我需要的是，用'svg'元素調整大小。現在'rect'確實如此，它沒有固定的東西。假設我得到了一個帶有「多邊形」的三角形，我怎樣才能以同樣的方式表現出來？試着讓'

那麼你不能使用'viewBox'嗎？它自動縮放一切。 – simonzack

確定'viewBox'有點它，我現在碰到的東西看起來像'd3.js'錯誤。謝謝！ –

支持百分比單位的SVG多邊形點

回答

相關問題