Почему при ресайзе border меняется?

Question

[olya_097]

update .
( Как я поняла - проблема с rect
но как его растянуть - не понимаю
пробовала в css задавать width: 100%
height: 100%

не помогло )

суть проблемы ниже:
загрузилась страница - все хорошо
делаю ресайз и
где -то увеличивается размер
или вообще пропадает бордер с какой то стороны

как можно исправить? или нельзя?

https://jsfiddle.net/1ut3ha5o/

Answer 1

[ⓒⓢⓢ]

потому что у rect не заданы размеры, поэтому он "плавает" внутри svg контейнера, попробуйте что-нибудь такое:
<svg><rect x="0" y="0" width="100%"></rect></svg>

Comments

[olya_097]

ⓒⓢⓢ, спасибо!
работает

только не понимаю почему width="100%"нужно в разметке писать?
а не в стилях (файле css)

иначе не отрабатывает корректно. Есть причина?)

[ⓒⓢⓢ]

olya_097, "стилевой файл css" и "аттрибуты элементов" - это немного разные вещи.
если говорить именно про поддержку "width" в css стилях для rect элементов, то это (возможно) появится в svg версии 2 - сейчас на это можно и не рассчитывать