I need an SVG path which'd using a line with the following 'pattern' for the line: 5 pixels width,
1 pix green line followed by 3 pix white line followed by 1 pix green line again. I know that I can kind of accomplish it by drawing 3 paths by using green, white and green colors and small offsets, but I'm looking for a way to do it in one go if possible.
Clarification:
Imagine that you have 3 pens with 3 different colors bound together so you can use them as one. I want to draw an arbitrary path using that 3 color pen by specifying the path data just once.
You can achieve your "3 pen effect" by defining the base path once, and then use that path several times with different x and y offsets and other settings (such as stroke):
<svg width="200" height="170">
<defs>
<path id="pattern" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" />
</defs>
<g stroke-width="2">
<use xlink:href="#pattern" x="0" y="0" stroke="red" />
<use xlink:href="#pattern" x="5" y="0" stroke="green" stroke-width="4" />
<use xlink:href="#pattern" x="10" y="0" stroke="blue" />
</g>
</svg>
I presume you mean that the pattern flows along the line, as in two parallel green lines. SVG can't do that in one go. You will need to use two lines for that I am afraid.
<svg width="400" height="400">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="green" stroke-width="5"/>
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="white" stroke-width="3"/>
<rect x="50" y="100" width="300" height="200" fill="none" stroke="green" stroke-width="5"/>
<rect x="50" y="100" width="300" height="200" fill="none" stroke="white" stroke-width="3"/>
</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>
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.
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>
Expected behavior:
I'm trying to write ABC in polygon with the help of but nothing is showing up. Is this the right way to do?
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<text x="10" y="100" style={{ fill: '#64FFDA' }}>
<textPath href="#Shape" fill="#64FFDA">
ABC
</textPath>
</text>
<polygon
id="Shape"
stroke="#64FFDA"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
fillOpacity="transparent"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
</g>
</svg>
If you need to place letters inside the polygon, you need to place the <text> command below the <polygon> command
Pay attention to the syntax of SVG command writing. Instead of strokeWidth ="5" you need stroke-width ="5"
<svg xmlns="http://www.w3.org/2000/svg" role="img" width="20%" height="20%" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<polygon
id="Shape"
stroke="#64FFDA"
stroke-width="4"
fill="#151515"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
<text x="50" y="55" font-size="22px" font-weight="500" font-family="sans-serif" fill="#64FFDA" text-anchor="middle" >ABC</text>
</g>
</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>