javascript - 如何让 SVG 尺寸随屏幕尺寸缩放？

Question

我试过在 <line> 之间切换和 <path>如果百分比参数有所不同。但我仍然遇到同样的问题 <svg>不会和我的 <img> 排成一行的。我的最终目标是基本上拥有 <svg> 的两端锁入<img>的边界的。任何建议都会很棒。

Pen

html :

<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="500%" width="100%" preserveAspectRatio="none">
    <line class="benefitSVG1" x1="15%" y1="15%" x2="20%" y2="32%" />
</svg>
</div>
<div>
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgMed" />
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png" class="benefitsImgLig" />

css :

body {
  background-color: black;
}

.benefitsImgMed,
.benefitsImgLig,
.benefitsImgArr,
.benefitsImgNig {
  position: absolute;
  padding: 10px;
  border-color: white;
  border-width: 5px;
  border-radius: 50%;
  border-style: solid;
}

.benefitsImgMed {
  margin-left: 8%;
  margin-top: 6%;
  width: 13%;
}

.benefitsImgLig {
  margin-top: 32%;
  margin-left: 19%;
  width: 13%;
}

.benefitsImgArr {
  margin-left: 37%;
  margin-top: 3%;
  width: 13%;
}

.benefitsImgNig {
  margin-left: 66%;
  margin-top: 18%;
  width: 13%;
}

.svg-benefitsContainer {
  width: 100%;
  height: 500%;
}

.benefitSVG {
  position: absolute
}

.benefitSVG1 {
  fill: none;
  stroke: white;
  stroke-width: 5;
  /*L 125 315 q -20 200 115 190*/
}

Answer 1

因为 SVG 百分比与 HTML 百分比的工作方式不同。

• <svg> width和 height分别相对于其父容器的宽度和高度。
• <line> x和 width是相对于 SVG 视口(viewport)宽度的。
• <line> y和 height是相对于 SVG 视口(viewport)高度的。
• <image> left和 top是相对于浏览器宽度的。

如果您希望它可靠，最安全的解决方案是将所有对象放在一个 SVG 文件中。它也更容易理解。

body{background-color:black;}

line, circle {
  fill: black;
  stroke: white;
  stroke-width: 0.5;
}

<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="100%" width="100%" viewBox="0 0 100 100">
  <line class="benefitSVG1" x1="14.5" y1="12.5" x2="25.5" y2="38.5" />

  <circle cx="14.5" cy="12.5" r="8"/>
  <image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png"
       x="8" y="6" width="13" height="13"
       class="benefitsImgMed"/>

  <circle cx="25.5" cy="38.5" r="8"/>
  <image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png"
       x="19" y="32" width="13" height="13"
       class="benefitsImgLig"/>
</svg>