The following code assigns the colour green to all the three lines of the SVG path.
<svg height="210" width="400">
<path d="M 150 0
L 75 200
L 225 200
L 150 0"
fill ="none" stroke="green" stroke-width="3" />
</svg>
Can I know how I can assign separate styles to each line?
In this case the solution would be using 3 different lines:
<svg height="210" width="400">
<g stroke-linecap="round" stroke-width="3" >
<path d="M 150 0
L 75 200" stroke="green"/>
<path d="M75 200
L 225 200" stroke="gold"/>
<path d="M225 200
L 150 0" stroke="red"/>
</g>
</svg>
It is not possible to have multiple styles within a single SVG path.
Related
I want to rotate the pointer around its axis of the following SVG component.
How could I achieve that. I have tried it with following method but it doesn't rotate around it.
<g id="Group 1" transform = "translate(100, 100) rotate(45 0 0)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd" d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" fill="#72A1E7"/>
</g>
It is easier to:
rotate something if it can be centered around 0,0.
calculate the angle of the needle if you know the angle at the starting point.
Therefor the you could draw the needle like this, with the middle of the short line at 0,0 (yes, it is off-canvas) and then pointing at 6 o'clock:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
Now the needle can be moved to the center (or where ever) of the image:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1" transform="translate(100 100)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
The rotation can be done in different ways, but here I rotate the needle/path <path> itself to the imagined zero point of the meter and then use the group element <g> to give the meter a "value". So, here the calculation is that the meter takes up 300 deg, the zero value is at 30 deg (from 6 o'clock) and the max value is then at 330 deg. Here the value is 1/3 = 100 deg.
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle transform="rotate(120 100 100)" cx="100" cy="100" r="85"
stroke="blue" stroke-width="5" stroke-dasharray="300 360" pathLength="360"
fill="none" />
<g id="Group 1" transform="translate(100 100) rotate(100)">
<path id="Point" transform="rotate(30)" fill-rule="evenodd"
clip-rule="evenodd" d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
How do I draw a non-filled in square. I.e. just the lines.
My code currently looks like this
<svg width="500" height="500">
<path d="M10 10 L100 10 L100 100 L10 100 Z" stroke="black"></path>
</svg>
It draws a solid black square.
In stead of solid black i just want to see the lines.
How do i do that with path?
Using path is a must
try this way
<svg width="500" height="500">
<path d="M10 10 L100 10 L100 100 L10 100 Z" stroke="black" fill="none"></path>
</svg>
I got a SVG-file with four paths (four squares) in it:
<html>
<body>
<svg height="1000" width="1000">
<path fill="blue" id="square1" d="M0 0 L0 100 L100 100 L100 0 Z" />
<path fill="green" id="square2" d="M100 0 L100 100 L200 100 L200 0 Z" />
<path fill="yellow" id="square3" d="M0 100 L0 200 L100 200 L100 100 Z" />
<path fill="red" id="square4" d="M100 100 L200 100 L200 200 L100 200 Z" />
</svg>
</html>
</body>
four squares
I would like to divide these four squares visually into two groups (blue/green & yellow/red).
A frame should be drawn around the two blue squares as well as around the two green squares.
How can I add an outline-border line around these two groups of squares?
Would it also be possible to automatically create a new object for each group that has its own ID?
Thanks in advance
You could use a smaller square on top of a bigger square to make borders e.g.:
<path fill="black" id="square1-bg" d="M0 0 L0 100 L100 100 L100 0 Z" />
<path fill="blue" id="square1" d="M3 3 L3 97 L97 97 L97 3 Z" />
As far as templating JS might be the best bet:
https://jsfiddle.net/Lyzpe35m/10
Is there a way to generate new, stand alone path out of a path with multiple masks applied to it?
I have a <path> with multiple masks applied via wrapping <g> parents, like so:
Here is the final graphic without masks visible:
DEMO on CodePen
Source code:
<svg>
<defs>
<mask id="primMask">
<path d="M 0 0 L 300 0 300 300 0 300 Z
M 100 0 A 50,50 0 0,0 100,100 A 50,50 0 0,0 100,0" fill-rule="evenodd" fill="white" />
</mask>
<mask id="anotherMask">
<path d="M 0 0 L 300 0 300 300 0 300 Z
M 30 0 A 10,10 0 0,0 30,60 A 10,10 0 0,0 30,0" fill-rule="evenodd" fill="white" />
</mask>
</defs>
<!-- These are just the circles with same paths
as masks to help visualize the masks shape/position -->
<g>
<path d="M 100 0 A 50,50 0 0,0 100,100 A 50,50 0 0,0 100,0" class="maskCopy" />
<path d="M 30 0 A 10,10 0 0,0 30,60 A 10,10 0 0,0 30,0" class="maskCopy" />
</g>
<!-- This is the main shape with masks -->
<g mask="url(#primMask)">
<g mask="url(#anotherMask)">
<path d="M 10 10 L 90 10 70 90 10 90 Z" class="myShape" />
</g>
</g>
</svg>
Here is why I'm asking: I need to apply different styles to myShape on mouse hovering it's visible part only. Currently, as you can test in DEMO, styles are changed when mouse hovers the original path, masks are not taken into count.
Besides, I think having stand-alone path provides more flexibility in more complex requirements and also is more performant when more masks are being added.
I wanted to animate a rectangle so that it follows a given path which worked thus far using animateMotion. This is what I have got:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<rect height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
Now my question: How do I get the rectangle to follow the path (already achieved) with the center of the rectangle (20 20) always being on the path? Can this be achieved with the means SVG offers?
Sure, just add a transform to the rect.
html, body, svg {
height: 100%;
width: 100%;
}
<svg>
<g>
<rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/>
<animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/>
</g>
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>
</svg>
The translate acts to move the rect origin from 0,0 to the rectangle centre.