4

Как последовательно выстроить группы внутри одного svg-элемента? Надо чтобы элементы g первого svg сами встали приблизительно как svg-теги во втором divе.

https://jsfiddle.net/kj1tmre3/1/

<div>
  <svg width=100 height=20>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
    <g><circle cx=10 cy=10 r=10 /></g>
  </svg>
</div>

<div>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
</div>

PS: Этот вопрос по-английски.

4
  • 1
    Никак. Только вручную рассчитать координаты. SVG это не HTML.
    – Alexey Ten
    8 июн 2016 в 5:29
  • @AlexeyTen, если бы это был один path, можно было бы делать относительный m. Для групп ничего такого не выйдет?
    – Qwertiy
    8 июн 2016 в 10:01
  • Нет. Даже path относительные координаты работают только внутри одного тега.
    – Alexey Ten
    8 июн 2016 в 10:07
  • А в чём, собственно, задача?
    – Alexey Ten
    8 июн 2016 в 10:07

3 ответа 3

2

#1 Вариант с использованием USE

Для решения совсем необязательно рисовать много фигур svg. Достаточно в секции defs
задать один раз окружность без привязки к координатам.

<defs> 
 <circle id="crc1" r="12px"   /> 
</defs>    

И в дальнейшем многократно использовать:

<use xlink:href="#crc1" x="20px" y="20px"  /> 
 <use xlink:href="#crc1" x="55px" y="20px"  /> 
 <use xlink:href="#crc1" x="90px" y="20px"  /> 

Ниже пример трех групп окружностей:

svg circle{
 fill:inherit;
 }
 #crc1 {
 fill:yellowgreen;
      }
 
  #crc2 {
 fill:mediumseagreen;
 }
  #crc3 {
 fill:teal;
 }
 #crc1:hover, #crc2:hover , #crc3:hover
 {
 fill:red;
 transition: 0.4s ;
 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 200 200" >

<defs> 
 <circle id="crc1" r="12px"   />
 <circle id="crc2" r="12px"   />
 <circle id="crc3" r="12px"   />
 </defs>
 
 <use xlink:href="#crc1" x="20px" y="20px"  /> 
 <use xlink:href="#crc1" x="55px" y="20px"  /> 
 <use xlink:href="#crc1" x="90px" y="20px"  /> 
    
 <use xlink:href="#crc2" x="20px" y="55px"  /> 
 <use xlink:href="#crc2" x="55px" y="55px"  /> 
 <use xlink:href="#crc2" x="90px" y="55px"  /> 
 <use xlink:href="#crc2" x="125px" y="55px"  /> 
  
 <use xlink:href="#crc3" x="20px" y="90px"  /> 
 <use xlink:href="#crc3" x="55px" y="90px"  /> 
 <use xlink:href="#crc3" x="90px" y="90px"  /> 
 <use xlink:href="#crc3" x="125px" y="90px"  /> 
 <use xlink:href="#crc3" x="160px" y="90px"  />

 
 </svg>

Анимация css transition при наведении работает только в Firefox

Видимо комбинацию svg команды use и css transition браузеры Chrome и Opera не воспроизводят.

Ниже пример с SVG анимацией работает во всех браузерах кроме IE, Edge

Анимацию при наведении курсора выполняет команда:

<set attributeName='fill'   to='red' begin='mouseover' end='mouseout' />

circle{
 fill:inherit;
 }
 
 #crc1 {
 fill:yellowgreen;
 
   }
 
 
  #crc2 {
 fill:mediumseagreen;
 }
  #crc3 {
 fill:teal;
 }  
 #crc1:hover, #crc2:hover , #crc3:hover
 {
 fill:red;
 transition: 0.5s;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 200 200" >
<defs> 

 <circle id="crc1" r="12px" >
 <set attributeName='fill'   to='red' begin='mouseover' end='mouseout' />
 </circle>
 
 <circle id="crc2" r="12px"   >
 <set attributeName='fill'  to='red' begin='mouseover' end='mouseout' />
 </circle>
 
 <circle id="crc3" r="12px">
<set attributeName='fill'  to='red' begin='mouseover' end='mouseout' />
 </circle> 
 
 </defs>
  
 
 <use xlink:href="#crc1" x="20px" y="20px" /> 
 <use xlink:href="#crc1" x="55px" y="20px"  /> 
 <use xlink:href="#crc1" x="90px" y="20px"  /> 
  
   
 <use xlink:href="#crc2" x="20px" y="55px"  /> 
 <use xlink:href="#crc2" x="55px" y="55px"  /> 
 <use xlink:href="#crc2" x="90px" y="55px"  /> 
 <use xlink:href="#crc2" x="125px" y="55px"  /> 
  
 <use xlink:href="#crc3" x="20px" y="90px"  /> 
 <use xlink:href="#crc3" x="55px" y="90px"  /> 
 <use xlink:href="#crc3" x="90px" y="90px"  /> 
 <use xlink:href="#crc3" x="125px" y="90px"  /> 
 <use xlink:href="#crc3" x="160px" y="90px"  />

 
 </svg>

#2 Вариант с использованием translate(x y)

svg path{
 fill:inherit;
 stroke:inherit;
 }
 #crc1 {
 fill:dodgerblue;

 }

  #crc2 {
 fill:  royalblue;
 }
  #crc3 {
 fill:  blueviolet;
 }
 #crc1:hover, #crc2:hover , #crc3:hover
 {
 fill:  limegreen; 
 transition: 0.4s;
}
<svg   viewBox="0 0 420 420" > 
<defs> 
<g id="crc1" >
<set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
 <circle cx="38.63" cy="64" r="35" fill="none" stroke-width="3.5" /> 
 <path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
 </g> 

 <g id="crc2">
 <set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
 <circle cx="38.63" cy="64" r="35" fill="none" stroke-width="9.5" /> 
 <path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
 </g> 

 <g id="crc3">
 <set attributeName='stroke'  to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill'  to='lime' begin='mouseover' end='mouseout'/>
 <circle cx="38.63" cy="64" r="35" fill="none" stroke-width="14.5" /> 
 <path  d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
 </g> 
 </defs>

 <use xlink:href="#crc1" x="20px"  /> 
 <use xlink:href="#crc1" x="100px"   /> 
 <use xlink:href="#crc1" x="180px"   /> 

 <g transform="translate(0 100)">
 <use xlink:href="#crc2" x="20px"   /> 
 <use xlink:href="#crc2" x="100px"   /> 
 <use xlink:href="#crc2" x="180px"   /> 
 <use xlink:href="#crc2" x="260px"  /> 
  </g> 

<g transform="translate(0 200)">
 <use xlink:href="#crc3" x="20px"   /> 
 <use xlink:href="#crc3" x="100px"   /> 
 <use xlink:href="#crc3" x="180px"   /> 
 <use xlink:href="#crc3" x="260px"   /> 
 <use xlink:href="#crc3" x="340px"   /> 
 </g>
 </svg>

5
  • Эм.. Я вроде про transtion не спрашивал?
    – Qwertiy
    12 авг 2017 в 17:22
  • Но в вопросе анимации вообще нет... Кстати, с tramsform'ом возникла интересная идея вложить группы. А так, вроде тут только use новое, остальное уже есть в ответах на enSO?
    – Qwertiy
    12 авг 2017 в 17:38
  • Держи плюсик за интересный ответ. А я запостил ответ с вложенными группами :) Что скажешь?
    – Qwertiy
    12 авг 2017 в 17:43
  • @Qwertiy здесь я отвечал самостоятельно, только потом заметил, что вы и на Enso задали вопрос, после этого разместил на Enso перевод своего ответа и туда, можете сравнить по времени. Спасибо за критику и новые мысли. 12 авг 2017 в 17:43
  • Да, здесь как-то пустовато было в плане ответов. Но мысль про вложенность мне только сейчас пришла. А вообще, я тогда сделал как написано в принятом на SO ответе - несколько svg-тегов.
    – Qwertiy
    12 авг 2017 в 17:45
2

SVG умеет автоматически раскладывать элементы, как это происходит в html. Только для этого надо поместить элемент, в нашем случае круг. в паттерн и применить его к блоку, в нашем случае это будет прямоугольник.

<pattern id="patternCircle"
             x="0" y="0" width="25" height="25"
             patternUnits="userSpaceOnUse" >
                <circle cx="10" cy="10" r="10" />
  </pattern> 

Паттерн раскладывает свой элемент по одному в блоке слева направо и сверху вниз. Подробнее тут и тут.

Это идеально подходит для поставленной задачи - разместить окружности слева направо с заданным шагом.

Ниже пример раскладки кругов в один ряд.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"  viewBox="0 0 300 300" style="border:1px dotted grey;">
 
<defs> 
 <pattern id="patternCircle"
             x="0" y="0" width="25" height="25"
             patternUnits="userSpaceOnUse" >
               
           <circle cx="10" cy="10" r="10" />
      </pattern>  
 </defs>
 <rect x="50" y="25" width="250" height="25"  fill= "url(#patternCircle)"/> 
 
 </svg>

Если необходимо сделать раскладку в несколько рядов, то делаем высоту прямоугольника выше в кратное число раз по сравнению с высотой паттерна.

Ниже пример с раскладкой в несколько рядов, но с применением нескольких прямоугольников для имитации раскладки текста с отступом первой строки.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"  viewBox="0 0 300 300" style="border:1px dotted grey;">
 
<defs> 
 <pattern id="patternCircle"
             x="0" y="0" width="25" height="25"
             patternUnits="userSpaceOnUse" >
                <circle cx="10" cy="10" r="10" />
  </pattern>  
</defs>  

	  <g id="block" transform="translate(10 10)" >
<!-- Красная строка кругов с отступом -->
<rect x="50" y="0" width="225" height="25"  fill= "url(#patternCircle)"/>  
<!-- Последующие строки -->
 <rect  y="25" width="275" height="25"  fill= "url(#patternCircle)"/>
 <rect  y="50" width="275" height="25"  fill= "url(#patternCircle)"/> 
 <rect  y="75" width="275" height="25"  fill= "url(#patternCircle)"/>
</g> 
  <!-- Повторное использование блоков из четырех строк -->
<use xlink:href="#block" x="0" y="125"> </use>
<use xlink:href="#block" x="0" y="250"> </use>

 </svg>

2
  • 1
    Интересная версия, но так можно только одинаковые элементы выстраивать.
    – Qwertiy
    13 авг 2017 в 8:55
  • @А у вас что-ли разные элементы были в вопросе? Если будет комбинация элементов, можно в паттерн комбинацию элементов включать. или создать несколько паттернов, короче широкое поле для творчества. И для родительского контейнера совсем необязательно использовать прямоугольники, можно path любой формы применить. 13 авг 2017 в 9:34
1

К сожалению, svg не умеет автоматически раскладывать элементы, как это происходит в html. Однако, можно вложить группы друг в друга и применить к ним transform - в таком случае каждая группа будет уползать всё дальше от родительской. Вот такой хак:

.dest g {
  transform: translateX(24px);
}

.dest svg > g {
  transform: translateX(0);
}
<div class=dest>
  <svg width=100 height=20>
    <g><circle cx=10 cy=10 r=10 />
    <g><circle cx=10 cy=10 r=10 />
    <g><circle cx=10 cy=10 r=10 />
    <g><circle cx=10 cy=10 r=10 />
    </g></g></g></g>
  </svg>
</div>

<div>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
  <svg width=20 height=20><g><circle cx=10 cy=10 r=10 /></g></svg>
</div>

PS: А вообще лучше воспользоваться несколькими svg-тегами.

1
  • Да можно оба (cx, cy) не повторять и скинуть в transform внешней группы. просто хотелось более понятный вид сохранить и сходство со вторым примером. А для сбора плюсиков время не подходящее - и так уже ночь, так ещё и выходной... На enSO оставлю принятый ответ принятым.
    – Qwertiy
    12 авг 2017 в 18:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.