Динамическое размещение элементов в svg

158

22 февраля 2019, 13:50

Как в SVG на равных расстояниях друг от друга (статично) разместить несколько генерируемых окружностей по периметру прямоугольника(с заданными размерами и координатами), как привязаться к его координатам?

Answer 1

В svg есть команда pattern, которая позволяет равномерно разместить фигуру или комбинацию фигур внутри любого объекта. Наполнение патерном идёт, как укладка плитки,- первый ряд слева-направо, далее заполнение второго ряда и т.д. Паттерн очень мощный инструмент со множеством аттрибутов. Более подробно о патернах можно почитать здесь и здесь.

Идея - использовать паттерн для равномерного размещения окружностей по периметру прямоугольника:

Заполняем паттерном большой прямоугольник:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        width="400" height="400" viewBox="0 0 200 200"  >   
		 
<defs> 
<pattern id="patternCircle" 
             x="0" y="0" width="16" height="16" 
             patternUnits="userSpaceOnUse" > 
                
            <circle id="crc1" r="4" cx="5" cy="5" fill="skyblue" stroke="green"/>  
      </pattern> 
 
</defs>  
 <rect width="122" height="122" stroke="black"  style=" fill: url(#patternCircle);" /> 
 
</svg>

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        width="400" height="400" viewBox="0 0 200 200"  >   
		 
<defs> 
<pattern id="patternCircle" 
             x="0" y="0" width="16" height="16" 
             patternUnits="userSpaceOnUse" > 
                
            <circle id="crc1" r="4" cx="5" cy="5" fill="skyblue" stroke="green"/>  
      </pattern> 
 
</defs>  
 <rect width="122" height="122" stroke="black"  style="fill: url(#patternCircle);" /> 
 <rect x="10" y="10" width="102" height="102" stroke="black" fill="#d5d5d5"  /> 
</svg>

и убираем лишние рамки:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        width="400" height="400" viewBox="0 0 200 200"  >   
		 
<defs> 
<pattern id="patternCircle" 
             x="0" y="0" width="16" height="16" 
             patternUnits="userSpaceOnUse" > 
                
            <circle id="crc1" r="4" cx="5" cy="5" fill="skyblue" stroke="green"/>  
      </pattern> 
 
</defs>  
 <rect width="122" height="122" stroke="none"  style="fill: url(#patternCircle);" /> 
 <rect x="10" y="10" width="102" height="102" stroke="none" fill="#d5d5d5"  /> 
</svg>

Answer 2

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

возможно здесь не будет работать или даже кроме как в Хром не будет работать ..тогда надо скопировать код и всё это хозяйство отрисовать в известных вам библиотеках и запускать уже на js

<svg viewBox="-50 0 400 300" xmlns:xlink="http//www.w3.org/1999/xlink" xmlns:ev="http//www.w3.org/2001/xml-events" xmlns="http://www.w3.org/2000/svg"> 
   
<rect id="el" x="2.2679" y="49.048" width="204.11" height="208.64" fill="none" stroke="#f69500" stroke-width="2" stroke-opacity="0" /> 
<g>   
  <path id="path" d="m173.12 154.43a69.402 70.158 0 0 1-69.402 70.158 69.402 70.158 0 0 1-69.402-70.158 69.402 70.158 0 0 1 69.402-70.158 69.402 70.158 0 0 1 69.402 70.158z" fill="none" stroke="#009500" stroke-width="2" /> 
</g> 
   
 <ellipse cx="71.06" cy="115.95" rx="15.119" ry="14.741" fill="blue"> 
    <animateMotion begin="el.mouseover" dur="10s" repeatCount="indefinite" rotate="auto"  restart="whenNotActive" fill="freeze" > 
     <mpath xlink:href="#path" /> 
    </animateMotion>   
  </ellipse> 
 <ellipse cx="106.59" cy="104.61" rx="15.119" ry="14.741" fill="#0f0" > 
 <animateMotion begin="el.mouseover + 0.5s" dur="10s" repeatCount="indefinite" rotate="auto"  restart="whenNotActive" fill="freeze" > 
     <mpath xlink:href="#path" /> 
    </animateMotion>     
  </ellipse> 
</svg>