2017-02-05 7 views
0

Я хочу использовать код 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> 
+0

@RobertLongson это код, который я экспортируемые из инструмента. '<путь id =" svg_1 "d =" m583.25,1l-582.5,404l4, -402l578.5, -2z "stroke-width =" 1.5 "fill =" # 33666C "/>' эта часть предназначена для этот треугольник, с которым у меня проблема. –

+0

Я хочу, чтобы этот треугольник был как изображение, представьте, что изображение заполняет весь браузер. изображение в этой ссылке https://i.stack.imgur.com/RFYI7.png –

+0

@RobertLongson Это не заполняет весь браузер, я думаю, из-за 'd =" m583.25,1l-582.5,404l4, - 402l578.5, -2z "в теге пути. Я новичок в svg, и я не знаю, как решить мою проблему. –

ответ

0

Вы хотите что-то вроде этого, я думаю. Я добавил 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>