Как управлять размерами SVG маски?

Question

[Cheizer]

Друзья, очень слабо разбираюсь в SVG. Помогите разобраться как управлять размерами этого SVG с маской?

Вот живой код https://codepen.io/Cheizer/pen/xxKvyzb

Размер SVG указан с бордером

width:170px; 
  height:125px;

Но фактический размер меньше :( как управлять размером?
И как менять размер элемента circle по углам? Если есть возможность на CSS управлять этими размерами было бы супер.

Answer 1

[Anna_BS]

viewBox=”0 0 10 6.7″ – определяет пользовательскую область просмотра - если у вас ширина 170, то высота должны быть ~114, но лучше избегать не целых значений
размер circle можно попробовать изменить через обводку stroke-width: 1px;

Comments

[Cheizer]

Не понимаю все равно, если ширина блока 170px, что бы сделать SVG по ширине блока, почему высота должна быть 114px? Высота блока 125px.

[Anna_BS]

Роман Кузнецов, Вы пишите размер не учитывая пропорции в viewBox. Если высота svg должна быть 125px при 170px ширины, то нужно поменять viewBox

[Cheizer]

Anna_BS, если я пишу во viewBox 170 на 125 все исчезает, как высчитать правильные цифры размера?

[Anna_BS]

https://codepen.io/Anna_Batura/pen/oNNWZKq?editors=1100
тут css.yoksel.ru/svg-sizes хорошие примеры по viewBox

[Cheizer]

Anna_BS, спасибо, вроде разобрался методом тыка, https://codepen.io/Cheizer/pen/xxKvyzb

SVG сделал 100% ширину и высоту по родителю, у него фикс размеры, тут порядок, а вот у элемента RECT не могу никак сделать высоту по родителю :( какой то отступ все же есть. Или RECT или image маска, не могу высоту настроить.

[Anna_BS]

Роман Кузнецов, https://codepen.io/Anna_Batura/pen/oNNWZKq?editors=1100
svg это "холст" с элементами внутри, у них есть размер и координаты в этом холсте

[Cheizer]

Anna_BS, видите, высота у вас тоже не соответствует родителю с красным бордером :( у меня та же история. Почему так? Размеры одинаковые везде.

[Anna_BS]

Роман Кузнецов, у картинки другие пропорции
она у вас 170 на 113.33
RECT у меня в примере соотв родителю

[Cheizer]

Anna_BS, ок, сейчас попробую поменять картинку под размер

[Cheizer]

Anna_BS, БЛАГОДАРЮ! Точно, рисунок не заполнял высоту. :)