Svg doesn't exactly apply to divs

Question

Why is the second square of the left and top lines of svg strongly do not coincide with the boundaries of the div? However, the right and bottom are also not very similar, but they are much more accurate.

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>

Screenshot:

jsfiddle.net/94toma4j/2 box-sizing wrote, but I didn’t think about the shift with respect to viscera.

Accepted Answer · 2017-02-28T10:02:26

It should be borne in mind that the thickness of the border ( border ) affects the shift of internal elements.

The simplest solution here is to use 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>

And now what kind of magic with rendering?)) I.stack.imgur.com/OcOPC.png

Svg doesn't exactly apply to divs

1 answer 1

More articles: