웹 디자인에서 어떻게 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 모양을 사용할 수 있습니까?

답변

관련 문제