I have this svg:
<circle cx="50" cy="100" r="50" stroke-width="0" fill="orange"/>
<polygon points="0,100, 50,50 100,100" fill="white"/>
The background is transparent. The polygon overwrites the circle with white color, but I want this area to be transparent (instead of white). How can I do this?
You can use fill-rule: evenodd property with path:s to "cut holes" to your shapes:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path fill="orange"
fill-rule="evenodd"
d="M50 50 L100 100 L0 100
A50 50 0 0 1 100 100
A50 50 0 0 1 0 100 z"/>
</svg>
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 an icon from our designer to add to our custom icon font. The icon should be a circle with a cutout of a user. Unfortunately the designer didn't follow some fontcustom guidelines, like no opacity and only use 1 color. The user cutout was white on a black circle. Now I'm trying to cut the user out of the circle using a mask. This is what I tried:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<circle cx="12" cy="9" r="3" stroke="black"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
Now somehow, the complete circle dissapears. I tried playing around with a fill instead of a stroke, which didn't work. I also tried changing the stroke to white, but that just gives me the part of the user icon that is within the circle (which is the complete user).
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<circle cx="12" cy="9" r="3" stroke="white"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="white"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
How can I get my user to be cut out of the circle? I don't get why the mask won't work.
In a mask, white means opaque (solid) and black means transparent (hole).
So if you want to make a mask with a shape cut out of it, the background of the mask has to be white, and the hole parts should be black.
Like this:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<circle cx="12" cy="9" r="3" stroke="black"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
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 have a figure with 100% width. And I need her inverted version. I rely on your help please.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C50 90 100 0 100 0 Z"/>
</svg>
jsfiddle example
Draw it in white on a black background then.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect width="100" height="40" fill="black"/>
<path d="M0 0 C50 90 100 0 100 0 Z" fill="white"/>
</svg>
or alternatively you could just keep drawing round the edge...
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C50 90 100 0 100 0 v40 h-100 v-40Z" fill="black"/>
</svg>