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

要让SVG的内容按其大小进行缩放，需要viewBox。

＆＃13;

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
}

＆＃13;

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

＆＃13;

在此示例中，所有内容都会缩放，包括线宽。如果这不是您想要的，那么您可以使用@ SirExotic的方法（使用百分比坐标），也可以使用vector-effect: non-scaling-stroke将线条设置为不缩放。

＆＃13;

svg {
  background-color: linen;
}

.point {
  stroke: black;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

SVG中心水平和垂直线

2 个答案: