I've Created a Method which creates me custom Paths looking like Stars and now I want to line up x amount of Circles onto this Path. How is this possible and is there a way to automate this?
Here are some Possible Paths. I want the black Path line to Look something like this. But it is necessary for me that I can exactly define the Amount of Circles on the Path.
Thanks for your Help :D
Measure the length of your path with .getTotalLength(), and then distribute as many circles along the path as you want, determining the points with .getPointAtLength(position).
const r = 2;
const svgns = "http://www.w3.org/2000/svg";
const line = document.querySelector('.line');
const circles = document.querySelector('.circles');
const length = line.getTotalLength();
function drawCircles(number) {
circles.textContent = '';
for (let i = 0; i < number; i++) {
const point = line.getPointAtLength(i * length / number);
const circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('r', r);
circle.setAttribute('cx', point.x);
circle.setAttribute('cy', point.y);
circles.appendChild(circle);
}
}
drawCircles(40);
svg {
height: 100vh;
}
.line {
fill: none;
}
.circles {
fill: none;
stroke: black;
stroke-width: 0.2px;
}
<svg viewBox="0 0 100 100">
<path class="line" d="M 50,10 40,40 10,50 40,60 50,90 60,60 90,50 60,40 Z" />
<g class="circles" />
</svg>
From your example picture, I get that you want to style the circles with both a fill and a stroke. This makes it necessary to really compute positions of the circles. If the circles only had a monochrome fill and no stroke, there would be an easier solution.
Set the pathLength attribute to the number of circles you want to draw and define stroke-dasharray="0 1". This draws a dash of length 0 with distance 1 between the dashes. If you combine that with stroke-linecap: round, each of the zero-length dashes is drawn as a circle.
svg {
height: 100vh;
}
.line {
fill: none;
stroke: black;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0 1;
}
<svg viewBox="0 0 100 100">
<path class="line" pathLength="40" d="M 50,10 40,40 10,50 40,60 50,90 60,60 90,50 60,40 Z" />
</svg>
I have some strange pieces of svg for animate them, the problem is, them no are a 'img-box-style' so, when I put one in another, rotate, translate to another place, etc. know the transform-origin is important. I do it by hand using porcents and try-catch after I get them. But... there aren't one or two. So...
I need to 'see' the transform-origin point of a svg, I trying by using ::after, adding anothers divs or spans, them inherit and works but not for svg. Finally i try using a <circle> but also, don't inherit, i don't know what to do.
Sometimes I need to put the circle in the middle of the two objects, in another time I need to put where the first fig start maybe x: 10% y: 60%.
Lets said I put put transform : 10% 60%; and see what I doing.
body{margin:3rem;}
#svg-id{height: 75vh; background: rgb(216 86 228 / 25%);}
#svg-id g{
/* transform-box: fill-box; */
transform-origin: center; /* how i can 'see' the transform origin??? */
/* animation: rotate 3s infinite linear; */
}
#svg-id g circle{
fill: red;
transform-origin: inherit; /* how inherit the transform origin??? */
}
#keyframes rotate{
from{transform: rotate(0turn);}
to {transform: rotate(1turn);}
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" id="svg-id" viewBox="0 0 237.79 190.08">
<g>
<polygon points="12.21 129.77 40.5 150.42 136.21 115.91 44.66 90.08 12.21 129.77" />
<polygon points="143.89 114.5 152.67 76.72 216.41 26.34 188.17 112.21 143.89 114.5" />
<circle r=16 />
</g>
</svg>
</div>
I was looking at this
https://css-tricks.com/almanac/properties/s/stroke-dasharray/
and then I was looking at this
https://codepen.io/team/css-tricks/pen/LGLzWq
I'm especially looking at the stroke-dasharray in this case in that code, not sure what is going on but, I think it is the ending of the stroke not sure how you can get it properly.
But basically this
image with circles
why is it happening and how to prevent it or choose one so that it fits with the lines and gaps?
Instead of stroke-dasharray: 5; you can use stroke-dasharray: 5.227; and the problem is solved. Why?
First: the total length of the path is 313.6517333984375. You can calculate it by using the getTotalLength() method.
You next divide the length in equal parts for example dividing the total length by 60: 313.6517333984375 / 60 = 5.227528889973958
Please note that the divider has to be an even number. 61 won't do since you'll have a stroke at the beginning and another one at the end. You need a stroke at the beginning and a gap at the end.
.stroke {
stroke: red;
stroke-dasharray: 5.227;
}
/* DEMO STYLES */
body {
background: #333;
}
.module {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: #333;
stroke-width: 5%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke" cx="60" cy="60" r="50"/>
</svg>
I thought I had pretty decent understanding of SVG, including the viewport, viewBox and the user coordinate system.
In the first example below, we use a viewBox with the same aspect ratio as the viewport. As expected, the user coordinate system rotation does not distort any angles.
In example two, we set the viewbox to a different aspect ratio, compared to the viewport. In other words, when mapping the viewBox to the viewport, the shapes' aspect ratios are not maintained. The bottom-right angle is not distorted from this scaling, which makes sense since the coordinate system origin is at (0,0).
When we rotate the user coordinate system in example two, however, the bottom right angle is distorted. This does not happen in example one.
Edit 1: Just to be clear, the issue is with regards to the bottom right angle in the last example. Before rotating, but after stretching with viewBox, the angle is 90%. After rotating however, it is no longer 90%.
Why does a non-uniformly scaled triangle loose its angles when rotating?
Example One (uniform scale)
body {
height: 500px;
}
svg {
width: 400px;
height: 400px;
border: 1px solid red;
}
<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" preserveAspectRatio="none">
<style>
polygon {
transform: translate(100px, 0px);
animation: 2s ease-in 1s 1 normal forwards rotate-down;
fill: green;
}
#keyframes rotate-down {
0% {
transform: translate(100px, 0px) rotate(0deg);
}
100% {
transform: translate(100px, 0px) rotate(45deg);
}
}
</style>
<polygon points="100,100 100,0 0,100" />
</svg>
Example Two (non-uniform scale)
body {
height: 500px;
}
svg {
width: 600px;
height: 400px;
border: 1px solid red;
}
<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
<style>
polygon {
transform: translate(100px, 0px);
animation: 2s ease-in 1s 1 normal forwards rotate-down;
fill: green;
}
#keyframes rotate-down {
0% {
transform: translate(100px, 0px) rotate(0deg);
}
100% {
transform: translate(100px, 0px) rotate(45deg);
}
}
</style>
<polygon points="100,100 100,0 0,100" />
</svg>
EDIT 2 (images to clarify):
Below we see the triangle after viewBox has been added (thus scaled and translated), but before rotating. The bottom right angle is 90 degrees.
Below we see the triangle after viewBox has been added (thus scaled and translated), and after rotating. The bottom right angle is no longer 90 degrees.
EDIT 3:
I eventually got to the bottom of this.
Below is an answer explaining the details and linking to relevant resources.
Hopefully this example will show you what's going on.
Hover over the SVG to see why it is the stretching that is changing the angle.
body {
height: 500px;
}
svg {
width: 200px;
height: 400px;
border: 1px solid red;
transition: 1s width;
}
svg:hover {
width: 600px;
}
<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
<style>
polygon {
transform: translate(100px, 0px) rotate(45deg);
fill: green;
}
</style>
<polygon points="100,100 100,0 0,100" />
</svg>
I finally got to the bottom of this.
The following question, which I posted after concluding what the actual problem was, explains why coordinate transformations behave as they do:
SVG rotate after scale: Order of transforms
In an answer to that question, #TemaniAfif shows how the final transformation matrix is calculated and applied to the graphic element's coordinates, in order to map it from the viewport coordinate system to the final user coordinate system.
Long story short, when applying transformations, what we actually do is copying the current user coordinate system, then translating it in relation to the current user coordinate system we copied from. In SVG, the initial user coordinate system (before viewBox or any transforms) is identical to the initial viewport coordinate system.
The chained / nested transforms are applied to the coordinate system left-to-right / outside-in, to reach a final coordinate system within which the graphical elements can be mapped. Note that nesting transforms have the same effect as chaining transforms on one element.
How does this actually work? Well, every transformation has an pre-defined affine transformation matrix, not related to CSS/SVG. There are several Wikipedia articles showing the matrices, like:
https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
https://en.wikipedia.org/wiki/Affine_transformation
To map the coordinates of an element to a final user coordinate system, we multiple the matrices with each other, left-to-right (the order it was written in the source code), to reach the final transformation matrix.
Note that, since we multiply the transform matrices in the order they are written in our source code, and since AxB is different from BxA when multiplying matrices, the order in which the transformations are written in our source code matters.
Finally, we then multiply the x and y coordinates for our element with this final transformation matrix, to see how each coordinate is mapped from the viewport coordinate system to the final user coordinate system.
For those so inclined, it might be easier to not think about the above and instead just mentally imagine that the chained / nested transforms are applied to the element itself (not to user coordinate systems) right-to-left / inside-out (i.e. opposite order of how it was applied to the coordinate systems).
Whether you imagine mentally that you transform the coordinate systems left-to-right and then map in the graphic element, or you transform the element itself by applying the transforms right-to-left, the end result will be the same.
Relevant Specifications
https://www.w3.org/TR/css-transforms-1/#transform-property
https://www.w3.org/TR/css-transforms-1/#transform-rendering
https://www.w3.org/TR/SVG/coords.html
Note
For this question it does not really matter whether the transforms are applied to SVG elements or to HTML elements. The same transformation mechanics apply.
It seems you think that viewBox is some kind of transform method applied, like others, when computing SVG image, which is not true. What you experience here is transformation applied on the whole SVG element. To apply this transformation a browser needs to have SVG object computed, so all in-SVG transformations are already applied.
This works exactly as scaling raster images:
polygon {
fill: transparent;
stroke-width: 4px;
stroke: black;
}
Base raster image:<br>
<img src="https://i.stack.imgur.com/ZA16O.png">
<br>Stretched raster image:<br>
<img style="height: 150px; width: 300px" src="https://i.stack.imgur.com/ZA16O.png">
<br>Base SVG:<br>
<svg viewBox="0,0,160,160" style="height: 120px" preserveAspectRatio="none">
<polygon points="10,10 150,10 80,150"/>
</svg>
<br>Stretched SVG:<br>
<svg viewBox="0,0,160,160" preserveAspectRatio="none" style="height: 120px; width: 300px;">
<polygon points="10,10 150,10 80,150"/>
</svg>
Only SVG's are drawed after they have been transformed, hence they do not lose quality.
SVG spec actually says (here) that all the transforms applied to SVG element work that way.
I have found this question that's been answered and seems to achieve a radial wipe animation with an SVG.
I am looking to achieve a border: 1px solid green; effect like the following example:
What I would like to know though is if this is possible with pure CSS —that would be ideal.
If it's not achievable with CSS, how would I tackle this type of thing with SVG?
CSS is not the right tool for animations like these. While you can do it with CSS, best is to make use of SVG. For a pure CSS version you could try adapting the snippet provided in my answer here but I wouldn't really be recommending it because as you can see it is very complex.
All you have to do is use a circle element, set its stroke-dasharray equal to the circumference of the circle and then animate the stroke-dashoffset like in the below snippet.
The stroke-dasharray property creates a dotted line stroke for the cirlce (the border) where each of the stroke and the dash between them will have the length as specified for the property.
The stroke-dashoffset property specifies the offset at which the circle's stroke should start. When the offset is at 0, the green colored stroke is visible whereas when the offset is at 314 (equal to the circumference), the dash in between strokes become visible. Thus it ends up producing a wipe effect.
svg {
height: 100px;
width: 100px;
transform: rotate(-90deg);
}
circle {
stroke: green;
fill: none;
stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
animation: wipe 2s linear infinite;
}
#keyframes wipe {
0% {
stroke-dashoffset: 0;
}
30%, 50% {
stroke-dashoffset: 314;
}
80%, 100% {
stroke-dashoffset: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
<circle cx='50' cy='50' r='40' />
</svg>
The above sample uses an infinite animation and so the wipe and repaint would run continuously. If it has to be toggled on/off then it would be better to use transition like in the below snippet. I have done this on :hover but you can easily adapt it to click or other events.
svg {
height: 100px;
width: 100px;
transform: rotate(-90deg);
}
circle {
stroke: green;
fill: none;
stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
stroke-dashoffset: 0; /* initial setting */
transition: all 2s;
}
svg:hover circle{
stroke-dashoffset: 314;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
<circle cx='50' cy='50' r='40' />
</svg>