SVG Path not filling - svg

I have created a function that converts dxf to svg. We where working with maker.js for the chaining and removing duplicates, but this didn't always work. Therefor we moved on to custom.
The result SVG is below, where we combined x/y in a single path when they are close enough, so creating layer paths.
The path isn't filling correctly on some occasions, like the one below. Where should we look in the path to get a fully filled path layer?
<svg width="112mm" height="94mm" viewBox="2313.0507 -1099.573 112 94" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd; stroke: #000;stroke-width: 1.5px;"><g id="importedPart" transform="scale(1,-1)" fill-rule="evenodd" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0c0c0;fill-rule:evenodd;"><path d="M2425.0507,1075.7029 L2425.0507,1029.4431 M2425.0507,1075.7029 A10,10 0 0,1 2417.8574,1085.301M2371.8574,1099.1711 L2417.8574,1085.301 M2371.8574,1099.1711 A10,10 0 0,1 2366.2441,1099.1711M2366.2441,1099.1711 L2320.2441,1085.301 M2320.2441,1085.301 A10,10 0 0,1 2313.0507,1075.7029M2313.0507,1029.4431 L2313.0507,1075.7029 M2313.0507,1029.4431 A10,10 0 0,1 2320.2441,1019.8451M2366.2441,1005.975 L2320.2441,1019.8451 M2366.2441,1005.975 A10,10 0 0,1 2371.8574,1005.975M2371.8574,1005.975 L2417.8574,1019.8451 M2417.8574,1019.8451 A10,10 0 0,1 2425.0507,1029.4431" id="4bcf575e-280a-415e-a59c-d62ff0dc0a80"></path><circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle><circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle></g></svg>


As I've commented: Your path is probably drawn in Illustrator or similar. You need to draw it again, this time without lifting the pen except for the 2 circles.
Next I've rewritten the path by removing the useless move to (M) commands (where you lifted the pen) and reversing some of the fragments.
<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd; stroke: #000;stroke-width: 1.5px;">
<g id="importedPart" transform="scale(1,-1)">
<path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029
A10,10 0 0,1 2417.8574,1085.301 L2371.8574,1099.1711
A10,10 0 0,1 2366.2441,1099.1711 L2320.2441,1085.301
A10,10 0 0,1 2313.0507,1075.7029
L2313.0507,1029.4431
A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
A10,10 0 0,1 2371.8574,1005.975 L2417.8574,1019.845
A10,10 0 0,1 2425.0507,1029.4431" />
<circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="fill:#FFF;"></circle>
<circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="fill:#FFF;"></circle>
</g>
</svg>
Also: letting you know that instead of drawing 2 white circles you can draw 2 circular holes in the path above. In the next example I draw the circles as paths and vI'm concatenating the d attribute for those paths to the main shape's d aribute. Since you have fill-rule : evenodd those circles would apear as holes:
<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd; stroke: #000;stroke-width: 1.5px;">
<g id="importedPart" transform="scale(1,-1)">
<path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029
A10,10 0 0,1 2417.8574,1085.301 L2371.8574,1099.1711
A10,10 0 0,1 2366.2441,1099.1711 L2320.2441,1085.301
A10,10 0 0,1 2313.0507,1075.7029
L2313.0507,1029.4431
A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
A10,10 0 0,1 2371.8574,1005.975 L2417.8574,1019.845
A10,10 0 0,1 2425.0507,1029.4431
M2337.860729224585 1070.833023906307 A8.5 8.5 0 0 1 2320.860729224585 1070.833023906307 A8.5 8.5 0 0 1 2337.860729224585 1070.833023906307
M2417.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2400.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2417.240729224585 1034.313023906308 "/>
</g>
</svg>

Related

SVG is not scaling when adding sizing to it with CSS

I'm trying to resize an svg element using css by setting width and height to a smaller value than the inline one, but it is not scaling, the end result is an empty square, the thing is that the <svg> element itself changes sizes, but the <path>'s inside it do not, this is shown by inspecting them in the browser's devtools.
The svg element is imported as a react component using SVGR, the styling is set using styled-components.
Before writing this post I read some possible solutions online, none worked (removing inline width and height, adding viewbox to same values as width and height etc...), any clue?
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<title/>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" fill="#fff133" d="m276.6,127.6a148.4,148.4 0 0 0 -114.46,242.86a148.49,148.49 0 0 0 164.33,16.54a150.66,150.66 0 0 1 -15.94,-16.51a148.38,148.38 0 0 1 9.79,-236.29a148.18,148.18 0 0 0 -43.72,-6.6z"/>
<path id="svg_2" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m116.5,207c-0.37,1.05 -0.73,2.11 -1.07,3.17"/>
<path id="svg_3" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m109.77,234.43a148.43,148.43 0 0 0 221,150.11a148.44,148.44 0 0 1 0,-257.08a148.46,148.46 0 0 0 -204,56.62"/>
</g>
</svg>

Redundant <path> element inside an svg file

Thw following two SVG markups render identically:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path style={inputAdornmentIcon} d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path style={inputAdornmentIcon} d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
Any idea what the second path element (<path d="M0 0h24v24H0z" fill="none"/>) in the first version actually does?

The extra path in your code is a a rectangle that covers all the svg canvas. As I've commented Google's icons are always using an extra rectangle like this for a background, but the rectangle is coming first. It's always a good idea to remove redundant elements and to simplify the markup.

Adding custom svg icons Angular

I would like to know how i can add customs svg icons to a mdi.svg file that i have.
The file already have some icons, but i need to put new ones in there.
here is a sample of the mdi.svg
<svg><defs><g id="access-point"><path d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></g>

You can use it like this:
<svg width="500" height="500">
<defs>
<g id="access-point">
<path d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" />
</g>
</defs>
<use xlink:href="#access-point" x="100" y="100">
</use>
</svg>

How to change the start point of svg animateMotion?

I'm trying to change the start point of the animation which can be seen at https://codepen.io/anon/pen/vdmMOJ.
The problem is how can i make the blue circle start from its own position instead it snapping to another position and then the animation starts.
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s" path="M181.50000762939544 -291.6000061035156M-166.49999237060456 -291.6000061035156A348 348 0 1 0 529.5000076293954 -291.6000061035156A348 348 0 1 0 -166.49999237060456 -291.6000061035156" begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>

When using motion paths, it's always a lot easier if you make it start at (0,0). That way removes a lot of the semi-complicated arithimetic needed to compensate for the difference between the animated element and the motion path.
Let's start by pretending the dot is on the LHS (the 9 o'clock position). The motion path would be like this:
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
But instead, you've positioned it at some other point on the circle. We need to work out the angle in order to calculate the new motion path.
The dot is at (215.5, 231.6). The centre of the blue circle is at (397, -60).
Therefore relative to the centre, the dot is at (-181.5, 291.6).
Now we know that, we also know that the opposite side of the motion path circle is at 181.5, -291.6. So we can update the motion path with that info. The values for the motion path arc (a) commands will be double those coord values (363 and 583.2).
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 363, -583.2
a 348,348 0 1, 0 -363, 583.2"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
But uh oh. The motion path is wonky now. It bulges. What caused that? The answer is that the coords we used for the dot (-181.5, 291.6) are not exactly on the circle. We can check by calculating what radius those values would correspond to.
r = sqrt(-181.5^2 + 291.6^)
= 343.47
Which is different from the radius of our circle (348). We can fix that by scaling our coordinate values up by the ratio (348 / 343.47)
The new coordinates are now (183.9, 295.4). If we use those values, instead, to update our motion math, we get:
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 367.8, -590.8
a 348,348 0 1, 0 -367.8, 590.8"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>

Svg and positions
The circle has its own starting position:
Where its coordinates(starting point) are defined by cx and cy
circle cx="215.5" cy="231.6"
But this is manipulated by the transform property:
transform="matrix(1, 0, 0, 1, 181.136, 199.592)"
The path that the animation starts on is defined by animateMotion's path.
The two first coordinated in the path is where the path starts:
animateMotion Path="M181.50000762939544 -291.6000061035156 [...]"
Sure, but how do i fix this?
Lets start with removing the transform on the circle. Auto generating programs love using those and it makes the coordinates impossible for a human to calculate.
Then change the starting position of the circle so it matches the animateMations starting position on the path.

Image not shown as svg marker

I have written the following code to display a triangle at the end of polyline and an image at the start of that.
Running this svg it just shows the triangle at the end but the image is not being displayed.
What am i missing here...
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="Image"
viewBox="0 0 10 10"
refX="5" refY="5"
markerWidth="6"
markerHeight="6"
orient="auto">
<path d="M 0 0 L 10 10 L 10 0 L 0 0 z" />
</marker>
</defs>
<polyline points="10,90 50,80 90,20"
fill="none" stroke="black"
stroke-width="2"
marker-end="url(#Triangle)" marker-start="url(#Image)"/>
</svg>

There is no marker with the id Triangle, so it isn't showing that. It is therefore only showing the Image marker (which happens to be a triangle).

Resources