Question

我创建了一个包含许多元素的SVG图表。所有元素均以百分比定位。原因是图表必须是可伸缩的。它工作正常，但是某些元素（例如轴的标签）需要相对于其他元素进行定位。

在此示例中，我有两条垂直线，第一条垂直线为50％，第二条垂直线为60％。我想存档第二行到第一行的距离始终为10像素。以及所有大小的SVG。也就是说，当svg大小更改时，第一行保持在50％，第二行向右移10px。

<svg height="100" width="100">
  <line x1="50%" y1="0" x2="50%" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="60%" y1="0" x2="60%" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

我找不到办法。希望有人能帮助我。

Answer 1

组合相对单位和绝对单位的一般方法是嵌套<svg>元素。例如，这可能是：

body { height: 90vh; }

<svg height="100%" width="100%">
  <svg x="50%" width="10" height="100%" overflow="visible">
    <line x1="0" y1="0" x2="0" y2="100%" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="10" y1="0" x2="10" y2="100%" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>
</svg>

Answer 2

对于您的问题，一种廉价的解决方案是彼此之间使用两行，并与vector-effect: non-scaling-stroke;一起使用，第一行较宽，第二行是白色，因为svg背景使两行有一定距离的错觉彼此相距10像素。

svg {
  border: 1px solid;
}
line {
  stroke: rgb(255, 0, 0);
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
}
.center {
  stroke-width: 10;
  stroke: white;
}

<svg id="svg" viewBox="0 0 100 100">
  <line x1="50" x2="50" y2="100" />
  <line class="center" x1="50" x2="50" y2="100" />
</svg>

Answer 3

还没有尝试过，但是不能在style属性中添加margin-left：10px吗？并让x值都等于50％。

如何相对于SVG中的其他元素定位元素

3 个答案: