我有一个 svg 三 Angular 形，我把它放在了部分的顶部:
position: relative;
top: 0;
left: 0;
我的 svg:
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fd7013;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fff; font-family:'Lato'; font-size:33.8486; font-weight: bold;">title</text>
</svg>
当屏幕小于 <450 像素时，我将宽度(媒体查询)更改为:
width: 100%;
但我的 svg 不在顶部:0 :( 屏幕:http://prntscr.com/aa27iy
如何使我的 svg 响应并始终在顶部:0？
最佳答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba</title>
<style>
#section{
background-color: #fc7013;
position: relative;
height: 500px;
padding: 80px 0px;
}
svg{
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section id="section">
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fff;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fd7013; font-family:'Lato'; font-size:33.8486; font-weight: bold;">#exampletext</text>
</svg>
<H1>TITLE</H1>
</section>
</body>
</html>
看，这对我有用 
关于html - 缩放 SVG 图像- viewbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35736020/