如何在網頁設計中使用svg形狀？

我想使用形狀像圖像全寬的svg代碼triangle image 如何使用此svg來填充瀏覽器？這裏是它的代碼如何在網頁設計中使用svg形狀？

<svg xmlns="http://www.w3.org/2000/svg"> 
<g> 
    <rect fill="#fff" id="canvas_background" height="100%" width="100%" y="0" x="0"/> 
</g> 
<g> 
<path id="svg_1" d="m583.25,1l-582.5,404l4,-402l578.5,-2z" stroke-width="1.5" fill="#33666C"/> 
</g> 
</svg>

來源

2017-02-05 Mi La

@RobertLongson這是我從一個工具導出的代碼。 ''這部分是爲那個三角形，我有問題。 –

我想這個三角形就像圖像一樣，想象一下圖像填充整個瀏覽器。這個鏈接中的圖像https://i.stack.imgur.com/RFYI7.png –

@RobertLongson它不是填充整個瀏覽器，我認爲是因爲'd =「m583.25,1l-582.5,404l4， - 路徑標記中的402l578.5，-2z「'。我是svg的初學者，我不知道如何解決我的問題。 –

你想要這樣的事情我猜。我已經添加了一個viewBox，因此形狀可以縮放。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 584 405" preserveAspectRatio="none"> 
 
<g> 
 
    <rect fill="#fff" id="canvas_background" height="100%" width="100%" y="0" x="0"/> 
 
</g> 
 
<g> 
 
<path id="svg_1" d="m583.25,1l-582.5,404l4,-402l578.5,-2z" stroke-width="1.5" fill="#33666C"/> 
 
</g> 
 
</svg>

來源

2017-02-05 09:44:00

如何在網頁設計中使用svg形狀？

回答

相關問題