缩放 SVG 多段线绘图

Question

我在 Javascript 中有一个 SVG 折线图：

    <div class="col-12" style="background-color:teal;">
                    <svg>
    
                        <polyline fill="none"
                                  stroke="#ced4da"
                                  stroke-width="2"
                                  points="
           00,120
           20,60
           40,80
           60,20
           80,80
           100,80
           120,60
           140,100
           160,90
           180,80
           200, 110
           220, 10
           240, 70
           260, 100
           280, 100
           300, 40
           320, 0
           340, 100
           360, 100
           380, 120
           400, 60
           420, 70
           440, 80
         " />
    
                    </svg>
    
            </div>

但我想让它以适合我放入的任何容器的方式响应。（第 8、10、12 列等）

到目前为止，我尝试使用 width、transform: scale() 和许多其他 css 属性，但其中 none 确实起到了作用。

如何根据 parent 缩放它，必须响应。拉伸因子和纵横比不在考虑范围内，可以拉伸。即使是最小的想法也很重要。提前致谢。

Answer 1

正如@Temani Afif 所评论的那样，您需要使用 viewBox

容器父尺寸必须以相对单位 vh、vw 或百分比

指定

.col-12 {
width:100%;
height:100%;
}

<div class="col-12" style="background-color:teal;">
                    <svg viewBox="0 0 500 500">
    
                        <polyline fill="none"
                                  stroke="#ced4da"
                                  stroke-width="2"
                                  points="
           00,120
           20,60
           40,80
           60,20
           80,80
           100,80
           120,60
           140,100
           160,90
           180,80
           200, 110
           220, 10
           240, 70
           260, 100
           280, 100
           300, 40
           320, 0
           340, 100
           360, 100
           380, 120
           400, 60
           420, 70
           440, 80
         " />
    
                    </svg>
    
            </div>

缩放 SVG 多段线绘图

Scaling SVG Polyline Drawing

html

css

svg

responsive-design

responsive