Question

我已尝试在<line>和<path>之间进行更改，以防百分比参数产生差异。但是我仍然遇到<svg>无法与<img>对齐的问题。我的最终目标是将<svg>锁定的两端基本上锁定在<img>的边界内。任何建议都会很棒。

<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视口宽度。
<line> y和height相对于SVG视口高度。
<image> left和top相对于浏览器宽度。

如果您希望它可靠，最安全的解决方案是将所有对象放在一起放在SVG文件中。理解它也简单得多。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何通过屏幕尺寸来扩展SVG尺寸？

1 个答案: