Как в SVG на равных расстояниях друг от друга (статично) разместить несколько генерируемых окружностей по периметру прямоугольника(с заданными размерами и координатами), как привязаться к его координатам?
-
или двигать ваши генерируемые окружности по path – Никита Фаст 17 окт '18 в 10:40
-
Интересует возможность статичного размещения элементов (окружностей) по периметру прямоугольника, они будут элементами графа.Я знаю формулу для размещения элементов по окружности, с расчётом размещения по периметру прямоугольника не получается.. – Сергей 17 окт '18 в 10:46
-
используем path как путь для ваших генерируемых окружностей , примерно так codepen.io/Sverstka/pen/NqGdQP?editors=1010 – Никита Фаст 17 окт '18 в 10:49
-
Спасибо, хотелось бы без Snap - пишу во vue js, (из-за некоторых условий) не могу использовать библиотеки в этом компоненте графа..Ищу простенький пример с математическим расчётом координат .. – Сергей 17 окт '18 в 10:59
-
при чём сразу snap можно и на smil сделать - я показал пример от snap.svg.js ...можно просто smil – Никита Фаст 17 окт '18 в 11:01
2 ответа
В 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>
Это 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>
-
-
Решил с помощью математики и svg-методов(getTotalLength(), getPointAtLength()) , но всё равно спасибо. – Сергей 18 окт '18 в 21:48