1

Почему у второго квадрата левая и верхняя линии из svg сильно не совпадают с границами div'а? Впрочем, правая и нижняя тоже не очень совпадают, но они гораздо точнее.

https://jsfiddle.net/94toma4j/1/

* {
  box-sizing: border-box;
}

body {
  width: 11em;
  transform: scale(3);
  transform-origin: 2em 2em;
}

div {
  position: absolute;
  left: 2em;
  top: 2em;
  height: 4em;
  width: 4em;
  border: 1px solid;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
  height: 10em;
  pointer-events: none;
}

path {
  fill: none;
  stroke: rgba(255,0,0,.5);
  stroke-width: .1;
}
<div>
  <div></div>
</div>

<svg viewBox="0 0 10 10">
  <path d="M2,2h4v4h-4zm2,2h4v4h-4z" />
</svg>

Скриншот:

скриншот

2
  • Из-за border, не?
    – vp_arth
    28 фев 2017 в 9:57
  • 1
    @vp_arth, блин.. да. jsfiddle.net/94toma4j/2 box-sizing написал, а что сдвиг относительно внутренностей, не подумал. Спасибо! Ответом напишешь?
    – Qwertiy
    28 фев 2017 в 9:59

1 ответ 1

2

Нужно учитывать, что толщина границы (border) влияет на сдвиг внутренних элементов.

Простейшим решением здесь будет использовать outline

* {
  box-sizing: border-box;
}

body {
  width: 11em;
  transform: scale(3);
  transform-origin: 2em 2em;
}

div {
  position: absolute;
  left: 2em;
  top: 2em;
  height: 4em;
  width: 4em;
  outline: 1px solid;
  outline-offset: -1px
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
  height: 10em;
  pointer-events: none;
}

path {
  fill: none;
  stroke: rgba(255,0,0,.5);
  stroke-width: .1;
}
<div>
  <div></div>
</div>

<svg viewBox="0 0 10 10">
  <path d="M2,2h4v4h-4zm2,2h4v4h-4z" />
</svg>

3
  • А теперь что за магия с отрисовкой?)) i.stack.imgur.com/OcOPC.png
    – Qwertiy
    28 фев 2017 в 10:07
  • У меня 500 Error по ссылке. svg отрисовывается по внутреннему краю div'ов. Outline снаружи, всё вроде ок
    – vp_arth
    28 фев 2017 в 10:17
  • Увидел, пересечение странно выглядит, ага. При outline=1px это не так заметно)
    – vp_arth
    28 фев 2017 в 10:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.