How can I draw half of ellipse in SVG? What I'm trying to do
<path d="M 198, 160 a 50,20 1 1,0 1,0" fill="pink" style="fill:pink;stroke:black;stroke-width:1;"/>
You already found the right command for your path; the elliptical arc curve.
In these examples I created half-ellipses with the same dimensions. You can see the two numbers after the A are all 10 and 2. 10 is the x radius and 2 the y radius. The two numbers after M are all stating points and the two numbers just before Z are the end points. The three numbers in between (0 0 0 and 0 0 1) are different flags. The only one I use here is the sweep-flag that indicates clockwise or anticlockwise.
A usefull tool that I use a lot for creating paths is this: SvgPathEditor.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8">
<path transform="translate(0 0)" fill="blue" d="M 10 0 A 10 2 0 0 0 10 4 Z"/>
<path transform="translate(10 0)" fill="pink" d="M 0 0 A 10 2 0 0 1 0 4 Z"/>
<path transform="translate(0 4)" fill="orange" d="M 0 2 A 10 2 0 0 1 20 2 Z"/>
<path transform="translate(0 6)" fill="lime" d="M 0 0 A 10 2 0 0 0 20 0 Z"/>
</svg>
Related
I have the following SVG code:
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path fill="black" fill-rule="evenodd" stroke="black" stroke-width="1" d="M 60 60 m -2 5 a 5 5 0 0 1 0 -10 l 4 0 a 5 5 0 0 1 0 10 z m 2 -3 a 2 2 0 0 1 0 -4 a 2 2 0 0 1 0 4 z"></path>
</svg>
You can view it on jsfiddle:
https://jsfiddle.net/Allasso/uk3t875g/4/
The outer section is filled with black. I would like to fill the inner circle with a different color. Is this possible?
I am writing a simple PCB designing tool that can be run from an HTML page. The example you see would be a solder pad. In the approach I am using, it is advantageous to me to make each symbol using a single path, thus I don't want to break it up into two paths. Also, the SVG code needs to be atomic so I can export the code as an SVG file, so I don't want to use CSS to accomplish this. I need everything to be done within a single path if possible.
I have viewed other questions regarding this topic, but the answers suggest "it is easiest to break it up into two paths," however, I am not seeing a definitive "it can't be done using a single path." If there is a way to do this using a single path I would like to know how to do it. If it simply can't be done, I would like to know that.
You are sketchy in giving constraints to the sort of paths you are trying to draw. But for the one you showed, the answer is relatively obvious: paths can have one color for the fill, and another one for the stroke. It is possible to define such a path that your example is reproduced faithfully, using a black stroke and a red fill combined with fill-rule="nonzero". I have changed the viewBox a bit to show the result at a larger scale.
<svg id="cogwheel_1" width="45%" viewBox="40 50 40 20">
<path fill="black" fill-rule="evenodd" stroke="black" stroke-width="1"
d="M 60 60 m -2 5 a 5 5 0 0 1 0 -10 l 4 0 a 5 5 0 0 1 0 10 z m 2 -3 a 2 2 0 0 1 0 -4 a 2 2 0 0 1 0 4 z"></path>
</svg>
<svg id="cogwheel_2" width="45%" viewBox="40 50 40 20">
<path fill="red" fill-rule="nonzero" stroke="black" stroke-width="4"
d="M 60 60 m -2 3.5 a 3.5 3.5 0 0 1 0 -7 l 4 0 a 3.5 3.5 0 0 1 0 7 z m 2 0 a 3.5 3.5 0 0 1 0 -7 a 3.5 3.5 0 0 1 0 7 z"></path>
</svg>
If your characterization of other paths would be "a shape in one color with some parts in the middle with another color", the general strategy for finding a path would be: Draw a partial path for the outer shape and one for the inner shape. Leave room for a generous stroke width. If there is too much space left even after you adjusted the stroke width, so that the fill color is showing in too many places, add a hatching to the path for these areas until you see only the stroke color.
This filter method will fill shapes that have a hole inside them - but you will need to change the radius of the dilate/erode so it matches the maximum radius of the hole (otherwise it will leave an unfilled area).
<svg id="cogwheel_1" width="600px" height="600px" viewBox="0 0 100 100">
<defs>
<filter id="fill-the-holes" x="-50%" y="-50%" width="200%" height="200%">
<feMorphology operator="dilate" radius="2" />
<feMorphology operator="erode" radius="2" result="fat-center"/>
<feFlood flood-color="green"/>
<feComposite operator="in" in2="fat-center"/>
<feComposite operator="over" in='SourceGraphic'/>
</filter>
</defs>
<g filter="url(#fill-the-holes)">
<path fill="black" fill-rule="evenodd" stroke="red" stroke-width="1" d="M 20 20 m -2 5 a 5 5 0 0 1 0 -10 l 4 0 a 5 5 0 0 1 0 15 z m 2 -3 a 2 2 0 0 1 0 -4 a 2 2 0 0 1 0 8 z"/>
</g>
</svg>
Can you help me align the icon into the middle of the circle?
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M11.5 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2 12.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zm9 2v-7h1v7h-1zm0 3V16h1v1.5h-1z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M7.92 2.514A1 1 0 0 1 8.794 2h1.412a1 1 0 0 1 .874.514l7.209 12.977a1 1 0 0 1-.042 1.04l-.683 1.024a1 1 0 0 1-.832.445H2.267a1 1 0 0 1-.832-.445L.753 16.53a1 1 0 0 1-.042-1.04l.437.242-.437-.242L7.92 2.514zM10.206 3H8.794L1.585 15.976 2.267 17h14.465l.683-1.024L10.205 3zM9 12.5V7h1v5.5H9zM9 15v-1.25h1V15H9z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24"><g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M9.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM2 10.5a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" clip-rule="evenodd" fill="#FFF"/><path fill-rule="evenodd" d="M9 14.75V13.5h1v1.25H9zM9.5 7A1.5 1.5 0 0 0 8 8.5H7a2.5 2.5 0 1 1 3.118 2.423.221.221 0 0 0-.104.058.07.07 0 0 0-.014.02v1.249H9V11c0-.574.457-.94.872-1.046A1.5 1.5 0 0 0 9.5 7z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
Can someone please tell me, why the left arrow head in the following file shows correctly in the generated PNG, but not in the browser?
https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg
In Firefox it is just not there, and in Chrome I see it pointing to the bottom right instead of left.
These are the two markers:
<marker id="arrowend" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
<marker id="arrowstart" viewBox="0 0 -13 -10" refX="-2" refY="-5" markerWidth="-3.5" markerHeight="-3.5" orient="auto">
<path d="M 0 0 C 0 0, -3 -5, 0 -10 L 0 -10 L -13 -5" fill="red"/>
</marker>
My solution based on the hint below:
<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 13 0 C 13 0, 10 5, 13 10 L 13 10 L 0 5" fill="red"/>
</marker>
So I changed the actual path. All my attempts to just mirror it failed, so for me this was the best solution.
This is where I put it in action, BTW: https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube
A viewBox with negative width and height is invalid. The contents of invalid viewBoxes do not render.
If Chrome renders arrowstart in any way, that's a Chrome bug. Whatever png generator you're using is clearly also buggy.
Here's one way to get the arrows on both ends, at least on browsers that support orient="auto-start-reverse"
<svg width="500" height="300" viewBox="0 0 200 50">
<defs>
<marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
</defs>
<line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
</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 this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>img</title>
<g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
<path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
<path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
</g>
</svg>
But react skip all properties with -, like: stroke-width="2"
Use camelCase. For example: strokeWidth instead of stroke-width. I've made a fiddle with working example.