Function to make simple 1-path SVG from complicated SVG - javascript
I have function (I can't change it), that creates SVG string from .dxf. It works fine, but I can't fill it. For example, I have:
<svg id="svgView" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-225.75000000000014 -1235.8500000000001 451.5000000000003 367.7000000000004" width="100%" height="100%">
<g stroke="#000000" stroke-width="0.5%" fill="none" transform="matrix(1,0,0,-1,0,0)">
<g stroke="rgb(0, 0, 0)">
<circle cx="-150" cy="1117" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-150" cy="1077" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-150" cy="977" r="6"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-50" cy="977" r="6"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="50" cy="977" r="6"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="150" cy="977" r="6"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-150" cy="1017" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-50" cy="1017" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="50" cy="1017" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="150" cy="1017" r="11.5"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-207" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-138" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-69" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="0" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="69" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="138" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="207" cy="1169" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-207" cy="1091" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-207" cy="1013" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-207" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="207" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="138" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="69" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="0" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-69" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="-138" cy="935" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="207" cy="1013" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<circle cx="207" cy="1091" r="2"></circle>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M207,1177L-207,1177"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M -207 1177 A 8 8 0 0 1 -215 1169"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M-215,1169L-215,935"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M -215 935 A 8 8 0 0 1 -207 927"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M-207,927L207,927"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M 207 927 A 8 8 0 0 1 215 935"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M215,935L215,1169"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M 215 1169 A 8 8 0 0 1 207 1177"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M-46.25,1143.25L46.25,1143.25"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M46.25,1143.25L46.25,1050.75"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M46.25,1050.75L-46.25,1050.75"></path>
</g>
<g stroke="rgb(0, 0, 0)">
<path d="M-46.25,1050.75L-46.25,1143.25"></path>
</g>
</g>
</svg>
And here is string, that I want to receive:
<svg id="svgView" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-225.75000000000014 -1235.8500000000001 451.5000000000003 367.7000000000004" width="100%" height="100%">
<g stroke="#000000" stroke-width="0.5%" fill="grey" transform="matrix(1,0,0,-1,0,0)">
<path d="
M -161.5, 1117
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M -161.5, 1077
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M -156, 977
a 6,6 0 1,0 12,0
a 6,6 0 1,0 -12,0
M -56, 977
a 6,6 0 1,0 12,0
a 6,6 0 1,0 -12,0
M 44, 977
a 6,6 0 1,0 12,0
a 6,6 0 1,0 -12,0
M 144, 977
a 6,6 0 1,0 12,0
a 6,6 0 1,0 -12,0
M -161.5, 1017
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M -61.5, 1017
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M 38.5, 1017
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M 138.5, 1017
a 11.5,11.5 0 1,0 23,0
a 11.5,11.5 0 1,0 -23,0
M -209, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -140, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -71, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -2, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 67, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 136, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 205, 1169
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -209, 1091
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -209, 1013
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -209, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 205, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 136, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 67, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -2, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -71, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M -140, 935
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 205, 1013
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M 205, 1091
a 2,2 0 1,0 4,0
a 2,2 0 1,0 -4,0
M207,1177L-207,1177
A 8 8 0 0 1 -215 1169
L-215,935
A 8 8 0 0 1 -207 927
L207,927
A 8 8 0 0 1 215 935
L215,1169
A 8 8 0 0 1 207 1177
M-46.25,1143.25L46.25,1143.25
L46.25,1050.75
L-46.25,1050.75
L-46.25,1143.25
"></path>
</g>
</svg>
What is the simplest way to do that in function?
P.S. for closed paths I need to cut M x,y if previous path had same coordinates at the end, for circles i use this formula:
M (CX - R), CY
a R,R 0 1,0 (R * 2),0
a R,R 0 1,0 -(R * 2),0
Related
Positioning an SVG Circle on top of a circular path using keypoints?
In this question the author of the question is able to position an SVG circle on top of a path like this: <div style="width:400px"> <svg viewBox="0 -10 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M20,60a35,35 0 1,1 60,0" stroke="#D3D7DB" stroke-width="4" fill="none" stroke-linecap="round"></path> <path d="M20,60a35,35 0 1,1 60,0" stroke="#008000" stroke-width="6" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="50 85"></path> <circle cx="0" cy="0" r="6" stroke-width="6" fill="#FFFFFF" stroke="#008000" > <animateMotion begin="0s" dur="infinite" repeatCount="infinite" keyPoints="0.5;0.5" fill="freeze" keyTimes="0;1" calcMode="linear" path="M20,60a35,35 0 1,1 60,0" ></animateMotion> </circle> </svg> </div> I've noticed that if I change the first keyPoints value it moves the circle. This is a stackblitz containing the same markup in case anyone wants to play with it. I'd like to apply this approach to a different path. <path #thumb transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#F66" stroke-width="18" pathlength="270" stroke-dasharray="0 270" stroke-dashoffset="-260" id="thumb" /> And I assumed it would just be a matter of copying in the circle markup: <circle cx="0" cy="0" r="6" stroke-width="6" fill="#FFFFFF" stroke="#008000" > <animateMotion begin="0s" dur="infinite" repeatCount="infinite" keyPoints="0.5;0.5" fill="freeze" keyTimes="0;1" calcMode="linear" path="M20,60a35,35 0 1,1 60,0" ></animateMotion> </circle> And then changing the path attribute value from M20,60a35,35 0 1,1 60,0 to m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6, however this ends up placing the circle on top of the SVG path and almost out of focus. <body> <svg #svgRoot id="svgclick" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg" > <path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583" /> <path #thumb transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#F66" stroke-width="18" pathlength="270" stroke-dasharray="0 270" stroke-dashoffset="-260" id="thumb" /> <circle cx="0" cy="0" r="6" stroke-width="6" fill="#FFFFFF" stroke="#008000" > <animateMotion begin="0s" dur="infinite" repeatCount="infinite" keyPoints="0.1;0.5" fill="freeze" keyTimes="0;1" calcMode="linear" path="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" ></animateMotion> </circle> </svg> </body> Thoughts?
The transform attribute is quite simply not applied to the motion path. Wrap the paths and the circle in a <g transform="rotate(90)">, remove the attributes from the individual paths, and all vectors will be positioned collectively. Applying that transform attribute to the <circle> element will not work. That would only rotate the circle in place around its center. The motion path would be applied in the un-rotated coordinate system. You should take the time to understand how the <animateMotion> works. It animates the circle, moving it from the first value of keyPoints to the second during the duration of the animation. The attribute dur has the value infinite, which is simply invalid. Instead, the initial value indefinite is used. Since there is also no end value, interpolation of values is turned off, you see no motion, and the first value is used at all times. That is what you intended, but I would think it preferable to stay with a valid combination of values and set both values of keyPoints to the same. Currently, your stroke-dasharray="0 270" draws a zero-length dash (visible as a circle because of stroke-linecap="round") and a gap of the path length. I suspect you intended to draw a partial path instead from the start of the path to the dot position. For that use: stroke-dasharray="270 270". Also, stroke-dashoffset="-260" and keyPoints="0.1;0.1" do not match. While the keyPoints go from 0...1, the dashoffset has to move from 270...0. So the correct value for the offset is 270 * (1 - 0.1) = 243. <body> <svg #svgRoot id="svgclick" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg" > <g transform="rotate(90)" > <path d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583" /> <path #thumb d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#F66" stroke-width="18" pathlength="270" stroke-dasharray="270 270" stroke-dashoffset="243" id="thumb" /> <circle cx="0" cy="0" r="6" stroke-width="6" fill="#FFFFFF" stroke="#008000" > <animateMotion begin="0s" dur="0s" repeatCount="infinite" keyPoints="0.1;0.1" fill="freeze" keyTimes="0;1" calcMode="linear" path="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" ></animateMotion> </circle> </g> </svg> </body>
Your new <path> is placed: x: 64.961 y:-15.355 (first 2 values after m)
That't why you path is almost off-canvas.
Since your path is already relative, you only need to change these 2 values to change the x/y offset in your viewBox.
You can also rotate the path d directly using svg path editor.
svg{
border: 1px solid red;
width:20em;
overflow:visible
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="circlePath" d="M25.67 79.86a34.98 34.41 90 0 1 0-49.47a34.98 34.41 90 0 1 48.67 0a34.98 34.41 90 0 1 0 49.47" fill="none" stroke-linecap="round" pathLength="100" />
</defs>
<use href="#circlePath" stroke="#D3D7DB" stroke-width="4" />
<use href="#circlePath" stroke="#008000" stroke-width="6" stroke-dasharray="50 100" />
<circle cx="0" cy="0" r="6" stroke-width="6" fill="#FFFFFF" stroke="#008000">
<animateMotion fill="freeze" begin="0s" dur="0s" repeatCount="0" keyPoints="0.5;0.5" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#circlePath" />
</animateMotion>
</circle>
</svg>
You could also define your horseshoe path as a reusable element within <def> an reference it via <use> and <mpath>.
how to increase loading percentage in SVG?
I am very new to SVG, I have a SVG already in my theme, it looks like something this. The SVG Html looks like this <div id="apexcharts1q6mbbep" class="apexcharts-canvas apexcharts1q6mbbep apexcharts-theme-light" style="width: 40px; height: 41px;"><svg id="SvgjsSvg1099" width="40" height="41" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"> <g id="SvgjsG1101" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"> <defs id="SvgjsDefs1100"> <clipPath id="gridRectMask1q6mbbep"> <rect id="SvgjsRect1103" width="46" height="42" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect> </clipPath> <clipPath id="forecastMask1q6mbbep"></clipPath> <clipPath id="nonForecastMask1q6mbbep"></clipPath> <clipPath id="gridRectMarkerMask1q6mbbep"> <rect id="SvgjsRect1104" width="44" height="44" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect> </clipPath> </defs> <g id="SvgjsG1105" class="apexcharts-radialbar"> <g id="SvgjsG1106"> <g id="SvgjsG1107" class="apexcharts-tracks"> <g id="SvgjsG1108" class="apexcharts-radialbar-track apexcharts-track" rel="1"> <path id="apexcharts-radialbarTrack-0" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565" fill="none" fill-opacity="1" stroke="rgba(242,242,242,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.3658536585365857" stroke-dasharray="0" class="apexcharts-radialbar-area" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565"></path> </g> </g> <g id="SvgjsG1110"> <g id="SvgjsG1112" class="apexcharts-series apexcharts-radial-series" seriesName="series-1" rel="1" data:realIndex="0"> <path id="SvgjsPath1113" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875" fill="none" fill-opacity="0.85" stroke="rgba(47,179,68,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.439024390243903" stroke-dasharray="0" class="apexcharts-radialbar-area apexcharts-radialbar-slice-0" data:angle="202" data:value="56" index="0" j="0" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875"></path> </g> <circle id="SvgjsCircle1111" r="14.670731707317076" cx="20" cy="20" class="apexcharts-radialbar-hollow" fill="transparent"></circle> </g> </g> </g> <line id="SvgjsLine1114" x1="0" y1="0" x2="40" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" stroke-linecap="butt" class="apexcharts-ycrosshairs"></line> <line id="SvgjsLine1115" x1="0" y1="0" x2="40" y2="0" stroke-dasharray="0" stroke-width="0" stroke-linecap="butt" class="apexcharts-ycrosshairs-hidden"></line> </g> <g id="SvgjsG1102" class="apexcharts-annotations"></g> </svg> <div class="apexcharts-legend"></div> </div> I played around <cicle> tag but I failed to increase the percentage. Currently you can see the loading icon is around 50% I want to make it dynamic. Can anyone help me out?
scalling problem in shapes and controllers of svg
I want to scale in component and shape javascript but it's not working with following svg .. can you guide me how to solve this issue??? <g text-anchor="middle" font-family="sans-serif" font-size="14" stroke="#000000" fill="#FFFFFF" type="svg-ext-proceng-pumpjet" id="SHE_6769b48c-0bde4e24"> <path d="M342,232A20,20 0 0 1 322,252A20,20 0 0 1 302,232A20,20 0 0 1 322,212A20,20 0 0 1 342,232" id="SHE_80a3b7ab-a1794e09"></path> <path d="M302,232L322,212L342,232M310.8,223.2C316.87,230.58 316.87,241.22 310.8,248.6M333.2,223.2C327.13,230.58 327.13,241.22 333.2,248.6" id="SHE_41f771e5-37da4534"></path> </g>
Dynamic text prop in SVG - Vue 2
I'm rendering a list of icons to which i need to set dynamic text, but it seems like the first items' prop overrides all other.
Desiered result:
Actual result:
Inspecting with Vue Devtools confirm that the correct props are passed to each image component.
Code:
<div>
<my-component v-for="item in items" :key="item.id" :label="item.number" />
</div>
My-component (only <tspan> tag and x attribute are modified):
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="102"
height="102"
viewBox="0 0 102 102"
>
<defs>
<filter
id="7ojrpldaib"
width="117.9%"
height="127.7%"
x="-8.9%"
y="-13.9%"
filterUnits="objectBoundingBox"
>
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="5"
/>
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.146811319 0"
/>
</filter>
<filter
id="s9h21tx5rd"
width="125.6%"
height="195.5%"
x="-12.8%"
y="-47.7%"
filterUnits="objectBoundingBox"
>
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="3.5"
/>
<feColorMatrix
in="shadowBlurOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199621667 0"
/>
</filter>
<filter
id="b7jpw6g3cf"
width="163.2%"
height="158.5%"
x="-31.6%"
y="-29.3%"
filterUnits="objectBoundingBox"
>
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="2"
/>
<feColorMatrix
in="shadowBlurOuter1"
result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.148289821 0"
/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text
id="kj63480c6e"
fill="#FFF"
font-family="AvenirNext-Bold, Avenir Next"
font-size="16"
font-weight="bold"
>
{{ label }}
<tspan :x="`${x}`" y="77">
{{ label }}
</tspan>
</text>
<path
id="6cjz1d52ca"
d="M53.5 3.175l30.57 17.65c3.403 1.965 5.5 5.596 5.5 9.526v35.298c0 3.93-2.097 7.561-5.5 9.526L53.5 92.825c-3.403 1.965-7.597 1.965-11 0l-30.57-17.65c-3.403-1.965-5.5-5.596-5.5-9.526V30.351c0-3.93 2.097-7.561 5.5-9.526L42.5 3.175c3.403-1.965 7.597-1.965 11 0z"
/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(3 3)">
<mask id="3k9a2vzgqc" fill="#fff">
<use xlink:href="#6cjz1d52ca" />
</mask>
<use
fill="#000"
filter="url(#7ojrpldaib)"
transform="matrix(1 0 0 -1 0 96)"
xlink:href="#6cjz1d52ca"
/>
<g mask="url(#3k9a2vzgqc)">
<g fill-rule="nonzero">
<path
fill="#E46A32"
d="M0 0.238H188V94.238H0z"
transform="translate(-47 .762)"
/>
<g>
<path
fill="#E76F39"
d="M57.141 82.931c-12.85-2.561-26.266-3.783-39.423-2.279-6.02.67-11.957 1.95-17.718 3.924V94h99.21c-13.628-3.901-27.137-8.002-40.87-10.834-.4-.082-.8-.152-1.199-.234z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#EB743F"
d="M188.119 0H0v84.576c5.761-1.973 11.699-3.266 17.718-3.936 13.157-1.492 26.572-.282 39.423 2.28.4.082.8.164 1.2.235 13.732 2.82 27.241 6.932 40.868 10.833h88.91V0z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#EE7A46"
d="M56.248 68.267c.376.095.752.2 1.116.294 23.069 6.169 45.702 15.686 69.78 20.75 20.482 4.301 41.093 3.432 60.975-1.198V0H0v67.55c6.15-2.067 12.522-3.254 18.941-3.63 12.616-.776 25.232 1.198 37.307 4.347z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F27F4C"
d="M0 0v50.455c6.537-2.163 13.345-3.208 20.152-3.255 12.087-.094 23.891 2.667 35.19 6.403.353.118.694.236 1.047.353 21.586 7.285 42.997 17.167 66.123 22.572 21.951 5.134 44.244 4.042 65.595-1.48V0H0z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F58453"
d="M21.375 30.48c11.546.704 22.563 4.135 33.074 8.471.329.13.646.27.976.4 20.105 8.413 40.292 18.623 62.467 24.404 23.373 6.087 47.43 4.794 70.227-1.739V0H0v33.276c6.937-2.303 14.18-3.231 21.375-2.797z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F79058"
d="M188.119 0H0v16.015c7.325-2.456 15.014-3.231 22.598-2.256 11.005 1.422 21.222 5.605 30.957 10.528.306.153.6.306.905.459 18.624 9.529 37.589 20.08 58.823 26.226 24.75 7.167 50.65 5.757 74.848-1.951V0h-.012z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F89B5E"
d="M53.485 10.14c17.142 10.657 34.884 21.503 55.165 28.047 24.526 7.92 50.71 7.145 75.001-.622 1.505-.482 2.986-.987 4.48-1.516V0H33.873c6.584 2.503 12.78 5.946 18.777 9.635.282.165.552.34.835.505z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#F9A663"
d="M188.119 0H58.552c13.886 10.082 28.63 19.329 45.478 25.404 22.55 8.13 47.03 8.777 69.956 2.479 4.797-1.316 9.536-2.961 14.145-4.9V0h-.012z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#FAB168"
d="M164.31 18.189c5.55-1.245 11.005-2.973 16.296-5.146 2.551-1.046 5.056-2.21 7.513-3.467V0H75.647c7.396 4.9 15.25 9.188 23.762 12.62 20.564 8.307 43.35 10.422 64.901 5.569z"
transform="translate(-47 .762) translate(0 .238)"
/>
<path
fill="#FBBC6E"
d="M154.645 8.507c8.854-1.48 17.507-4.36 25.49-8.507H95.13c18.542 8.342 39.458 11.867 59.516 8.507z"
transform="translate(-47 .762) translate(0 .238)"
/>
</g>
</g>
</g>
</g>
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" xlink:href="#kj63480c6e" />
<use xlink:href="#kj63480c6e" />
</g>
<g
fill-rule="nonzero"
filter="url(#b7jpw6g3cf)"
transform="translate(33 13)"
>
<path
fill="#4E6276"
d="M11.396 35.532L0.039 35.532 0.039 14.269 11.957 14.269"
/>
<path
fill="#2E485D"
d="M11.396 35.532L0.039 35.532 0.039 31.614 11.957 31.614"
/>
<path
fill="#FFD0A6"
d="M36.263 25.497c.609-.609.985-1.45.985-2.379s-.376-1.77-.985-2.379c-.465-.464-1.065-.793-1.736-.923h-1.67c1.856 0 3.36-1.507 3.36-3.363 0-.928-.375-1.769-.985-2.378-.61-.61-1.45-.986-2.378-.986l-12.28-.026c1.777-2.097 3.09-5.596 3.826-8.164.584-2.04-.595-4.165-2.635-4.75-2.04-.583-4.166.596-4.749 2.635-.13.454-.383.956-.693 1.457-.27.436-.583.872-.899 1.278-.827 1.063-1.82 1.984-2.913 2.77-1.755 1.26-4.979 4.213-4.861 8.837v10.02C7.65 35.36 16.057 40 23.29 40h8.208c.928 0 1.77-.377 2.379-.984.608-.61.985-1.452.985-2.38 0-1.858-1.507-3.363-3.364-3.363l1.374-.063c.929 0 1.77-.376 2.379-.986.609-.608.985-1.45.985-2.378 0-.928-.376-1.77-.985-2.379-.61-.608-1.45-.984-2.38-.984h1.013c.929 0 1.77-.377 2.379-.986z"
/>
<g>
<path
fill="#F5C8A1"
d="M25.67 28.123h-8.208c-7.234 0-15.64-4.64-15.64-12.853V5.249C1.768 3.165 2.395 1.42 3.26.017 1.663 1.602-.015 4.08.07 7.437v10.02c0 8.214 8.408 12.854 15.641 12.854h8.207c.928 0 1.771-.376 2.38-.984.424-.425.734-.963.885-1.564-.455.23-.97.36-1.514.36z"
transform="translate(7.578 9.688)"
/>
<path
fill="#E8B182"
d="M28.224 8.386c-.571 1.038-1.677 1.742-2.946 1.743h-.538c-.482 0-.872-.39-.872-.87 0-.241.097-.459.255-.618.159-.157.376-.255.617-.255h3.484zM29.252 15.052c-.571 1.038-1.677 1.741-2.946 1.742h-1.763c-.481 0-.872-.389-.872-.87 0-.24.098-.458.255-.617.16-.158.377-.255.617-.255h4.71zM28.24 21.779c-.572 1.038-1.677 1.742-2.946 1.743H23.53c-.481 0-.872-.39-.872-.87 0-.241.098-.459.255-.618.16-.157.376-.255.617-.255h4.71z"
transform="translate(7.578 9.688)"
/>
</g>
<path
fill="#FFBF3E"
d="M5.917 18.716c0 .811-.658 1.47-1.47 1.47-.811 0-1.47-.659-1.47-1.47 0-.812.659-1.47 1.47-1.47.812 0 1.47.658 1.47 1.47z"
/>
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
label: String
},
computed: {
x() {
switch (this.label.length) {
case 1:
return 46
case 2:
return 42
case 3:
return 40
case 4:
return 36
default:
return 46
}
}
}
}
</script>
I am generating random id's from the labels that is working fine.
It was not working because you have same ids for all the <text>
change the code like as follows
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" :xlink:href="`#kj63480c6e${label}`" />
<use :xlink:href="`#kj63480c6e${label}`" />
</g>
<text :id="`kj63480c6e${label}`" fill="#FFF" font-family="AvenirNext-Bold, Avenir Next" font-size="16" font-weight="bold">
{{ label }}
<tspan :x="`${x}`" y="77">
{{label}}
</tspan>
</text>
Here is the complete code if you want to copy
Complete Code for my-component is as follows which is also you can directly copy
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="102"
viewBox="0 0 102 102">
<defs>
<filter id="7ojrpldaib" width="117.9%" height="127.7%" x="-8.9%" y="-13.9%" filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5" />
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.146811319 0" />
</filter>
<filter id="s9h21tx5rd" width="125.6%" height="195.5%" x="-12.8%" y="-47.7%"
filterUnits="objectBoundingBox">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3.5" />
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199621667 0" />
</filter>
<filter id="b7jpw6g3cf" width="163.2%" height="158.5%" x="-31.6%" y="-29.3%"
filterUnits="objectBoundingBox">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2" />
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.148289821 0" />
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text :id="`kj63480c6e${label}`" fill="#FFF" font-family="AvenirNext-Bold, Avenir Next" font-size="16"
font-weight="bold">
{{ label }}
<tspan :x="`${x}`" y="77">
{{label}}
</tspan>
</text>
<path id="6cjz1d52ca"
d="M53.5 3.175l30.57 17.65c3.403 1.965 5.5 5.596 5.5 9.526v35.298c0 3.93-2.097 7.561-5.5 9.526L53.5 92.825c-3.403 1.965-7.597 1.965-11 0l-30.57-17.65c-3.403-1.965-5.5-5.596-5.5-9.526V30.351c0-3.93 2.097-7.561 5.5-9.526L42.5 3.175c3.403-1.965 7.597-1.965 11 0z" />
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(3 3)">
<mask id="3k9a2vzgqc" fill="#fff">
<use xlink:href="#6cjz1d52ca" />
</mask>
<use fill="#000" filter="url(#7ojrpldaib)" transform="matrix(1 0 0 -1 0 96)"
xlink:href="#6cjz1d52ca" />
<g mask="url(#3k9a2vzgqc)">
<g fill-rule="nonzero">
<path fill="#E46A32" d="M0 0.238H188V94.238H0z" transform="translate(-47 .762)" />
<g>
<path fill="#E76F39"
d="M57.141 82.931c-12.85-2.561-26.266-3.783-39.423-2.279-6.02.67-11.957 1.95-17.718 3.924V94h99.21c-13.628-3.901-27.137-8.002-40.87-10.834-.4-.082-.8-.152-1.199-.234z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#EB743F"
d="M188.119 0H0v84.576c5.761-1.973 11.699-3.266 17.718-3.936 13.157-1.492 26.572-.282 39.423 2.28.4.082.8.164 1.2.235 13.732 2.82 27.241 6.932 40.868 10.833h88.91V0z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#EE7A46"
d="M56.248 68.267c.376.095.752.2 1.116.294 23.069 6.169 45.702 15.686 69.78 20.75 20.482 4.301 41.093 3.432 60.975-1.198V0H0v67.55c6.15-2.067 12.522-3.254 18.941-3.63 12.616-.776 25.232 1.198 37.307 4.347z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F27F4C"
d="M0 0v50.455c6.537-2.163 13.345-3.208 20.152-3.255 12.087-.094 23.891 2.667 35.19 6.403.353.118.694.236 1.047.353 21.586 7.285 42.997 17.167 66.123 22.572 21.951 5.134 44.244 4.042 65.595-1.48V0H0z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F58453"
d="M21.375 30.48c11.546.704 22.563 4.135 33.074 8.471.329.13.646.27.976.4 20.105 8.413 40.292 18.623 62.467 24.404 23.373 6.087 47.43 4.794 70.227-1.739V0H0v33.276c6.937-2.303 14.18-3.231 21.375-2.797z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F79058"
d="M188.119 0H0v16.015c7.325-2.456 15.014-3.231 22.598-2.256 11.005 1.422 21.222 5.605 30.957 10.528.306.153.6.306.905.459 18.624 9.529 37.589 20.08 58.823 26.226 24.75 7.167 50.65 5.757 74.848-1.951V0h-.012z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F89B5E"
d="M53.485 10.14c17.142 10.657 34.884 21.503 55.165 28.047 24.526 7.92 50.71 7.145 75.001-.622 1.505-.482 2.986-.987 4.48-1.516V0H33.873c6.584 2.503 12.78 5.946 18.777 9.635.282.165.552.34.835.505z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#F9A663"
d="M188.119 0H58.552c13.886 10.082 28.63 19.329 45.478 25.404 22.55 8.13 47.03 8.777 69.956 2.479 4.797-1.316 9.536-2.961 14.145-4.9V0h-.012z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#FAB168"
d="M164.31 18.189c5.55-1.245 11.005-2.973 16.296-5.146 2.551-1.046 5.056-2.21 7.513-3.467V0H75.647c7.396 4.9 15.25 9.188 23.762 12.62 20.564 8.307 43.35 10.422 64.901 5.569z"
transform="translate(-47 .762) translate(0 .238)" />
<path fill="#FBBC6E"
d="M154.645 8.507c8.854-1.48 17.507-4.36 25.49-8.507H95.13c18.542 8.342 39.458 11.867 59.516 8.507z"
transform="translate(-47 .762) translate(0 .238)" />
</g>
</g>
</g>
</g>
<g fill="#FFF">
<use filter="url(#s9h21tx5rd)" :xlink:href="`#kj63480c6e${label}`" />
<use :xlink:href="`#kj63480c6e${label}`" />
</g>
<g fill-rule="nonzero" filter="url(#b7jpw6g3cf)" transform="translate(33 13)">
<path fill="#4E6276" d="M11.396 35.532L0.039 35.532 0.039 14.269 11.957 14.269" />
<path fill="#2E485D" d="M11.396 35.532L0.039 35.532 0.039 31.614 11.957 31.614" />
<path fill="#FFD0A6"
d="M36.263 25.497c.609-.609.985-1.45.985-2.379s-.376-1.77-.985-2.379c-.465-.464-1.065-.793-1.736-.923h-1.67c1.856 0 3.36-1.507 3.36-3.363 0-.928-.375-1.769-.985-2.378-.61-.61-1.45-.986-2.378-.986l-12.28-.026c1.777-2.097 3.09-5.596 3.826-8.164.584-2.04-.595-4.165-2.635-4.75-2.04-.583-4.166.596-4.749 2.635-.13.454-.383.956-.693 1.457-.27.436-.583.872-.899 1.278-.827 1.063-1.82 1.984-2.913 2.77-1.755 1.26-4.979 4.213-4.861 8.837v10.02C7.65 35.36 16.057 40 23.29 40h8.208c.928 0 1.77-.377 2.379-.984.608-.61.985-1.452.985-2.38 0-1.858-1.507-3.363-3.364-3.363l1.374-.063c.929 0 1.77-.376 2.379-.986.609-.608.985-1.45.985-2.378 0-.928-.376-1.77-.985-2.379-.61-.608-1.45-.984-2.38-.984h1.013c.929 0 1.77-.377 2.379-.986z" />
<g>
<path fill="#F5C8A1"
d="M25.67 28.123h-8.208c-7.234 0-15.64-4.64-15.64-12.853V5.249C1.768 3.165 2.395 1.42 3.26.017 1.663 1.602-.015 4.08.07 7.437v10.02c0 8.214 8.408 12.854 15.641 12.854h8.207c.928 0 1.771-.376 2.38-.984.424-.425.734-.963.885-1.564-.455.23-.97.36-1.514.36z"
transform="translate(7.578 9.688)" />
<path fill="#E8B182"
d="M28.224 8.386c-.571 1.038-1.677 1.742-2.946 1.743h-.538c-.482 0-.872-.39-.872-.87 0-.241.097-.459.255-.618.159-.157.376-.255.617-.255h3.484zM29.252 15.052c-.571 1.038-1.677 1.741-2.946 1.742h-1.763c-.481 0-.872-.389-.872-.87 0-.24.098-.458.255-.617.16-.158.377-.255.617-.255h4.71zM28.24 21.779c-.572 1.038-1.677 1.742-2.946 1.743H23.53c-.481 0-.872-.39-.872-.87 0-.241.098-.459.255-.618.16-.157.376-.255.617-.255h4.71z"
transform="translate(7.578 9.688)" />
</g>
<path fill="#FFBF3E"
d="M5.917 18.716c0 .811-.658 1.47-1.47 1.47-.811 0-1.47-.659-1.47-1.47 0-.812.659-1.47 1.47-1.47.812 0 1.47.658 1.47 1.47z" />
</g>
</g>
</g>
</svg>
</template>
<script>
export default {
props: {
label: String
},
computed: {
x() {
console.log(this.label)
switch (this.label.length) {
case 1:
return 46
case 2:
return 42
case 3:
return 40
case 4:
return 36
default:
return 46
}
}
}
}
</script>
Application URL is as follows:
Application URL
SVG custom circles shape
I don't have experience with SVG and I have a problem with creating my custom shape. I want to create below shape. Share of slices and belongings lines should be genarated dynamically. All slices are the same. For example: If we have 4 slices each slices would have 25% value, if there are 10 slices we would have 10 slices with 10%. <!DOCTYPE html> <html> <body> <svg width="800" height="800"> <circle cx="400" cy="400" r="300" stroke="black" stroke-width="2" fill="red" /> <circle cx="400" cy="400" r="80" stroke="black" stroke-width="2" fill="blue" /> <path d="M 400 400 H 480 320" stroke="black" stroke-width="2" fill="none" />Sorry, your browser does not support inline SVG. </svg> </body> </html> Please, help me out.
You will need multiple elements to this SVG.
Two for the center circle
Four for the outer circle
First, you need 4 areas for the 4 sections in the outside circle. This can be done like so:
<svg width="50%" viewbox="0 0 100 100">
<path d="M50,50 L0,50 A50,50 0 0,1 50,0" fill="red"></path>
<path d="M50,50 L100,50 A50,50 0 0,1 0,50" fill="blue"></path>
<path d="M50,50 L100,50 A50,50 0 0,1 50,100" fill="green"></path>
<path d="M50,50 L50,0 A50,50 0 0,1 100,50" fill="yellow"></path>
</svg>
For the inside area, you will need two segments with text inside.
text {
fill: white;
font-size: 16px;
}
<svg width="50%" viewbo0x="0 0 100 100">
<path d="M0,50 A50,50 0 0,1 100,50z" fill="purple"></path>
<path d="M0,50 A-50,-50 0 1,0 100,50z" fill="green"></path>
<text x="18" y="40">Some text</text>
<text x="15" y="70">Bottom text</text>
</svg>
Join them together and hey presto, you should have your shape.
text {
font-size: 2.5em;
fill: white;
}
<svg width="50%" viewbox="0 0 1000 1000">
<path d="M500,500 L0,500 A500,500 0 0,1 500,0" fill="red"></path>
<path d="M500,500 L1000,500 A500,500 0 0,1 0,500" fill="blue"></path>
<path d="M500,500 L1000,500 A500,500 0 0,1 500,1000" fill="green"></path>
<path d="M500,500 L500,0 A500,500 0 0,1 1000,500" fill="yellow"></path>
<path d="M350,500 A100,100 0 0,1 650,500z" fill="purple" x="45" y="45"></path>
<path d="M350,500 A-100,-100 0 1,0 650,500z" fill="pink"></path>
<text x="420" y="450">Some text</text>
<text x="410" y="550">Bottom text</text>
</svg>
SVG Documentation (MDN)