SVG 中心水平线和垂直线

Question

如何创建一个包含两条线（一条水平线，一条垂直线）的 SVG，从一侧的中间到另一侧的中间，从而使加号与 SVG 容器的大小相同？

这是我现在拥有的，但是当更改 SVG 大小时，线长不会改变

<svg width="10px" height="10px">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

Answer 1

此示例中的容器是 body，但您始终可以将其包装在另一个容器中并设置所需的 height 和 width。

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

<svg height="100%" width="100%">
  <line x1="50%" y1="0" x2="50%" y2="100%" style="stroke:blue;stroke-width:1" />
    <line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:blue;stroke-width:1" />
</svg>

Answer 2

要使 SVG 的内容随其大小缩放，它需要 viewBox。

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
}

<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

在这个例子中，一切都在缩放，包括线宽。如果这不是您想要的，那么您可以使用@SirExotic 的方法（使用百分比坐标），或者您可以使用 vector-effect: non-scaling-stroke.

将线条设置为不缩放

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

SVG 中心水平线和垂直线

SVG center horizontal and vertical line

css

svg

line

width