SVG центр по горизонтали и вертикали - PullRequest
Новая
       27

SVG центр по горизонтали и вертикали

0 голосов
/ 27 мая 2018

Как я могу создать 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>

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Чтобы содержимое 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>
0 голосов
/ 27 мая 2018

Контейнером в этом примере является 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>
...