Cheizer
@Cheizer

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

Друзья, очень слабо разбираюсь в 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 управлять этими размерами было бы супер.
  • Вопрос задан
  • 989 просмотров
Решения вопроса 2
@a-kh
web-разработчик
Изменять размер скорее всего только с помощью js можно:
this.setAttribute('r', '5');
А насчет размера svg, попробуйте именно для svg сделать width:100% и height:100%, а управлять размером уже родителя, в который вписан данный svg. Так вроде бы работает
Ответ написан
origami1024
@origami1024
went out for a night walk
В самом начале у тебя идет
<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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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>


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы