根據容器的高度縮放線 svg

Question

我正在制作一個 svg（一個線元素）並且它是垂直的。 我希望該 svg 行根據容器的高度進行縮放。

<div class="parent">
    <svg viewBox="0 0 100 100">
       <line x1="0" y1="0" x2="0" y2="20" style="stroke: black;stroke-width:1"/>
    </svg>
</div>

現在如果增加父寬度垂直線比例的高度，但要求是，隨着我們增加高度，長度應該成比例地增加。 我把viewBox放錯了嗎？

Answer 1

我認為您正在尋找vector-effect屬性。 如果將其設置non-scaling-stroke - 這將使您能夠將線條的筆觸保持在 1 像素，而與 svg 的大小無關。 看看下面的這個例子，我已經設置了 svg 來填充父級：

 .parent { background: #efefef; width: 200px; height: 200px; } svg { width: 100%; height: 100%; }

 <div class="parent"> <svg viewBox="0 0 100 100"> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black;stroke-width:1" vector-effect="non-scaling-stroke"/> </svg> </div>

嘗試更改周圍父級的大小，您會注意到筆畫寬度始終保持一致。

Answer 2

按比例縮放 SVG：

 .parent { background: yellow; } .parent svg { height: 100%; }

 100px height <div class="parent" style="height: 100px;"> <svg viewBox="0 0 2 100" preserveAspectRatio="none"> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width:2"/> </svg> </div> 300px height <div class="parent" style="height: 300px;"> <svg viewBox="0 0 2 100" preserveAspectRatio="none"> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width:2"/> </svg> </div>

縮放 SVG 但保持筆畫

 .parent { background: yellow; } .parent svg { height: 100%; }

 100px height <div class="parent" style="height: 100px;"> <svg viewBox="0 0 2 100" preserveAspectRatio="none"> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width:2" vector-effect="non-scaling-stroke"/> </svg> </div> 300px height <div class="parent" style="height: 300px;"> <svg viewBox="0 0 2 100" preserveAspectRatio="none"> <line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width:2" vector-effect="non-scaling-stroke"/> </svg> </div>