Как SVG управлять на CSS?

Question

[Cheizer]

Друзья, очень слабо разбираюсь в SVG. Помогите разобраться как управлять размерами этого SVG с маской на CSS?
t могу даже размер изменить, размер блока 170px на 125px, а SVG намного меньше, как изменить размер SVG? И как изменить размер кругов CIRCLE? Подскажите пожалуйста.

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

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

<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="myMask" x="0" y="0">
      <rect x=1 y=1 width="8" height="5" fill="white"></rect>
      <circle cx="1" cy="1" r="1" fill="black"></circle>
      <circle cx="9" cy="1" r="1" fill="black"></circle>
      <circle cx="1" cy="6" r="1" fill="black"></circle>
      <circle cx="9" cy="6" r="1" fill="black"></circle>
    </mask>
    <circle cx=5 cy=5 r=1 id="path1"/>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" mask="url(#myMask)"/>
</svg>

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

Comments

[origami1024]

Вота смотри через clippath вариант, может больше подойдет. Правда, поддержка браузеров вроде похуже, но точной инфы нет.
https://codepen.io/origami1024/pen/WNNOrPW

[Cheizer]

origami1024, о спасибо! Нужно попробовать.

Answer 1

[Александр]

Изменять размер скорее всего только с помощью js можно:
this.setAttribute('r', '5');
А насчет размера svg, попробуйте именно для svg сделать width:100% и height:100%, а управлять размером уже родителя, в который вписан данный svg. Так вроде бы работает

Comments

[Cheizer]

Так все равно не пойму как SVG сделать по размеру блока,

сделал родителю фикс размеры, а SVG 100%, и все равно он не по размеру родителя.

https://codepen.io/Cheizer/pen/xxKvyzb

[Александр]

svg у вас ровно 170 на 125

[Cheizer]

Александр, точно, значит маска не по размеру, как размер маски увеличить не понимаю тогда :(

[Cheizer]

Немного начинаю понимать, элемент RECT не получается конкретно у меня поменять размеры его.

[Александр]

Да, скорее всего с этими цифрами надо поиграться.

Можно это костылями попробовать решить, но скорее всего в итоге криво получится, поэтому лучше подыскать цифры.

А вам нужны именно эти уголочки закругленные?

[Cheizer]

Александр, да именно в них и дело, внутренний бордер радиус, скругленные углы дурацкие, ни на CSS никак с фоном не сделать. Вроде к размеру приблизился нужному, но вот в CIRCLE параметр cy не пойму как управлять по осям с помощью одной цифры

[Александр]

Лучше это сделать другим образом. Через час напишу решение

[Cheizer]

Александр, я уже много чего перепробовал, все в инете перерыл, если есть фон у родителя, то такой блок с внутренним бордер радиус не сделать к сожалению, есть на JS вроде только решение. Легко сделать на белом фоне такой блок блок или на любом однородном. Но если фоном рисунок, то углы будет видно.

[Cheizer]

:) попробуйте хотя бы простым цветом залить фон у родителя блока :) и увидите что не годиться это.

[Cheizer]

origami1024, я уже испробовал и этот вариант, если нет фона, то да, если есть фон картинкой у родителя, то такое не подходит.

[origami1024]

Роман Кузнецов, да, это было не то)
Вот статья из 2011 года
lea.verou.me/2011/03/beveled-corners-negative-bord...

[Cheizer]

origami1024, :))) спасибо, это тоже видел, у этого проблема другая, с фоном порядок, НО НЕЛЬЗЯ ВНУТРЬ БЛОКА сделать рисунок фоном :))) тоже не подходит поэтому :) внутрь блока не поместить рисунок.

[origami1024]

Роман Кузнецов, ну тогда на svg может быть действительно легче всего. Особенно с точки зрения поддержки браузерами.

[Александр]

Можно еще псевдоэлементами накрутить эти уголки))

https://codepen.io/a-kh/pen/qBBmjje

[Cheizer]

Александр, ну ка ну ка, :)) это что то новое, сейчас поюзаю

[Cheizer]

Александр, А нет, это опять же из серии, когда фон однородный, не рисунком. Так можно по разному сделать. :) Я все способы собрал. Тут двойное условие, что бы фон под блоком с углами был виден. И внутрь блока с углами нужно заполнить рисунокм. Пока технологии CSS не могут такого сделать.

[Александр]

Роман Кузнецов, ну если это один такой блок будет (не шаблонный, когда могут меняться картинки), можно один раз извратиться)
Блоку .rad поставить фоном картинку, а также всем псевдоэлементам ставить эту же картинку фоном, только менять позицию, подгоняя под большой фон))

[Cheizer]

Александр, о да, это будет жестко, пока SVG маска выручает только, но у нее свои ограничения, работает только по ID, и нельзя манипулировать рисунком внутри маски.

Answer 2

[origami1024]

В самом начале у тебя идет

<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">

Здесь в параметре viewbox задаются внутренние координаты (от 0 до 10 по оси X) и от (0 до 6.7 по оси Y).
Тоесть, например, по оси X твои 170px переводятся во внутренних координатах в 11 единиц(от 0 до 10).
Координаты у элементов внутри svg задаются в этих внутренних единицах.

Например, вот первый элемент в маске (прямоугольник):

<rect x=1 y=1 width="8" height="5" fill="white"></rect>

Он начинается по x с координаты 1 (не 0) и по y тоже с не нулевой координаты.
Width - длина в этих внутр единицах, и тд. Поизменяй эти цифры, посмотри что измениться, сам всё поймешь.
У кругов в маске (circle) координаты и радиус также заданы.

Если есть возможность на CSS управлять этими размерами было бы супер.

Да, просто даешь элементам внутри svg имя класса или id, чтобы выглядело вот так (class="circle1"):

<circle class="circle1" cx="9" cy="1" r="1" fill="black"></circle>

И потом в css:

.circle1{
  r: 3;
  cx: 5;
}

Comments

[Cheizer]

Спасибо, с кругами разобрался, и с размерами SVG. А вот размер маски не могу поменять, сделать по ширине и высоте родителя. Сделать 170 на 125.

[origami1024]

Роман Кузнецов, маска растянута на всю svg.
Если задашь

<rect x=0 y=0 width="10" height="6.7" fill="white"></rect>

то она будет на всю.
Кругам тоже надо cx cy сдвинуть.

Answer 3

[Dzhuzzeppe]

Открыть svg файл в редакторе кода, скопировать path и ViewBox. Дальше в body в самом верху пишете:

<svg style="display: none;">
	<symbol id="facebook" viewBox="0 0 96.124 96.123">
		<g>
			<path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803
				c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654
				c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246
				c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z"/>
		</g>
	</symbol>
</svg>

Вставляете иконку где Вам надо таким образом:

<a class="social__item" href="#">
	<svg class="social__icon">
		<use xlink:href="#facebook"></use>
	</svg>
</a>

Не обязательно в точности как у меня. Я показал на примере социальной иконки.