如何在网页设计中使用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形状？

回答

相关问题