Find Parallel or Offset SVG path
up vote
0
down vote
favorite
I need a parallel SVG path.
I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'.
Let Offset be 2px.
Original Path O/P:
Path Image
Path Segments when further divided:
0: ["M", 0, 0]
1: ["H", 50]
2: ["A", 20, 20, 0, 1, 0, 100, 50]
3: ["V", 75]
4: ["C", 50, 125, 0, 85, 0, 85]
Any algorithm or way to find the offset path for individual segments or on whole??
Updated Image:
Red lines represent the offset SVG image, I need to get.
Example Offset SVG Path
javascript math svg polygon
add a comment |
up vote
0
down vote
favorite
I need a parallel SVG path.
I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'.
Let Offset be 2px.
Original Path O/P:
Path Image
Path Segments when further divided:
0: ["M", 0, 0]
1: ["H", 50]
2: ["A", 20, 20, 0, 1, 0, 100, 50]
3: ["V", 75]
4: ["C", 50, 125, 0, 85, 0, 85]
Any algorithm or way to find the offset path for individual segments or on whole??
Updated Image:
Red lines represent the offset SVG image, I need to get.
Example Offset SVG Path
javascript math svg polygon
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates inM
. It's possible that I haven't understood your goal, however. So,M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 at 12:38
Have you had a look atscale
andtranslate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 at 12:54
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I need a parallel SVG path.
I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'.
Let Offset be 2px.
Original Path O/P:
Path Image
Path Segments when further divided:
0: ["M", 0, 0]
1: ["H", 50]
2: ["A", 20, 20, 0, 1, 0, 100, 50]
3: ["V", 75]
4: ["C", 50, 125, 0, 85, 0, 85]
Any algorithm or way to find the offset path for individual segments or on whole??
Updated Image:
Red lines represent the offset SVG image, I need to get.
Example Offset SVG Path
javascript math svg polygon
I need a parallel SVG path.
I have path as 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'.
Let Offset be 2px.
Original Path O/P:
Path Image
Path Segments when further divided:
0: ["M", 0, 0]
1: ["H", 50]
2: ["A", 20, 20, 0, 1, 0, 100, 50]
3: ["V", 75]
4: ["C", 50, 125, 0, 85, 0, 85]
Any algorithm or way to find the offset path for individual segments or on whole??
Updated Image:
Red lines represent the offset SVG image, I need to get.
Example Offset SVG Path
javascript math svg polygon
javascript math svg polygon
edited Nov 21 at 12:50
asked Nov 21 at 12:25
user10519853
105
105
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates inM
. It's possible that I haven't understood your goal, however. So,M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 at 12:38
Have you had a look atscale
andtranslate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 at 12:54
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28
add a comment |
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates inM
. It's possible that I haven't understood your goal, however. So,M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 at 12:38
Have you had a look atscale
andtranslate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 at 12:54
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates in
M
. It's possible that I haven't understood your goal, however. So, M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.– Tex
Nov 21 at 12:38
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates in
M
. It's possible that I haven't understood your goal, however. So, M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.– Tex
Nov 21 at 12:38
Have you had a look at
scale
and translate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform– Mehdi
Nov 21 at 12:54
Have you had a look at
scale
and translate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform– Mehdi
Nov 21 at 12:54
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28
add a comment |
2 Answers
2
active
oldest
votes
up vote
4
down vote
accepted
Algorithmic solution
Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)
The problem are Bezier curves. There is a library bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.
As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d)
.
Grafical solution
Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.
- Draw your path. Inkscape has an "XML editor" where you can enter the path definition string directly.
- Remove the fill and define a stroke with a width that is double the offset you want to achieve.
- Choose "Stroke to Path" from the "Path" menu.
- Choose "Break Apart" from the "Path" menu.
- Now you have two (filled) paths, one offset to the outside, on offset to the inside; discard the one you don't need.
Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
If I find a path inset by 2 with Inkscape, I get
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
add a comment |
up vote
1
down vote
I understand you have this path and you need to draw a line inside following the border. My solution is using the <feMorphology>
filter with the operator="erode"
. I hope this is what you need.
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
accepted
Algorithmic solution
Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)
The problem are Bezier curves. There is a library bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.
As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d)
.
Grafical solution
Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.
- Draw your path. Inkscape has an "XML editor" where you can enter the path definition string directly.
- Remove the fill and define a stroke with a width that is double the offset you want to achieve.
- Choose "Stroke to Path" from the "Path" menu.
- Choose "Break Apart" from the "Path" menu.
- Now you have two (filled) paths, one offset to the outside, on offset to the inside; discard the one you don't need.
Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
If I find a path inset by 2 with Inkscape, I get
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
add a comment |
up vote
4
down vote
accepted
Algorithmic solution
Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)
The problem are Bezier curves. There is a library bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.
As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d)
.
Grafical solution
Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.
- Draw your path. Inkscape has an "XML editor" where you can enter the path definition string directly.
- Remove the fill and define a stroke with a width that is double the offset you want to achieve.
- Choose "Stroke to Path" from the "Path" menu.
- Choose "Break Apart" from the "Path" menu.
- Now you have two (filled) paths, one offset to the outside, on offset to the inside; discard the one you don't need.
Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
If I find a path inset by 2 with Inkscape, I get
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
add a comment |
up vote
4
down vote
accepted
up vote
4
down vote
accepted
Algorithmic solution
Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)
The problem are Bezier curves. There is a library bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.
As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d)
.
Grafical solution
Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.
- Draw your path. Inkscape has an "XML editor" where you can enter the path definition string directly.
- Remove the fill and define a stroke with a width that is double the offset you want to achieve.
- Choose "Stroke to Path" from the "Path" menu.
- Choose "Break Apart" from the "Path" menu.
- Now you have two (filled) paths, one offset to the outside, on offset to the inside; discard the one you don't need.
Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
If I find a path inset by 2 with Inkscape, I get
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Algorithmic solution
Offsetting lines is relatively trivial. For arcs, it is solvable by changing both radii by the same value. (You still have to find the end points.)
The problem are Bezier curves. There is a library bezier.js that solves this mathematically. For background, look at the accompaigning "Primer on Bézier Curves" by Pomax, especially the chapter on curve offsetting.
As is pointed out there, it is impossible to find a single Bezier curve that offsets another single curve; you need to divide it in "simpler" sub-parts. The library implements a function that combines these parts again and gives back the offset path: .offset(d)
.
Grafical solution
Vector grafic GUIs implement this sort of thing. The following describes it for Inkscape, but I am sure Adobe Illustrator (and maybe Sketch) can do more or less the same.
- Draw your path. Inkscape has an "XML editor" where you can enter the path definition string directly.
- Remove the fill and define a stroke with a width that is double the offset you want to achieve.
- Choose "Stroke to Path" from the "Path" menu.
- Choose "Break Apart" from the "Path" menu.
- Now you have two (filled) paths, one offset to the outside, on offset to the inside; discard the one you don't need.
Note btw that your path definition is invalid. The arc between points [50, 0] and [100, 50] is given with a radius of 20, but the two points are 70.71 apart. In accordance with the spec, the path is instead drawn as
M 0,0 H 50 A 35.3553,35.3553 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z
If I find a path inset by 2 with Inkscape, I get
M 2,2 H 45.7988 C 34.2583,16.6514 35.0764,37.9045 48.5859,51.4141 62.0955,64.9236 83.3486,65.7417 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
Note that Inkscape has computed a cubic Bezier approximation for the arc segment. You can revert to an arc simply by increasing the radii by 2, changing the large arc flag and retaining the end points:
M 2,2 H 45.7988 A 37.3533 37.3533 0 0 0 98,54.2012
V 74.1094 C 73.6278,98.1373 49.7442,100.409 31.6426,96.7891 14.9635,93.4533 3.8673,85.3962 2,83.9785 Z
answered Nov 21 at 16:47
ccprog
8,2891825
8,2891825
add a comment |
add a comment |
up vote
1
down vote
I understand you have this path and you need to draw a line inside following the border. My solution is using the <feMorphology>
filter with the operator="erode"
. I hope this is what you need.
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
add a comment |
up vote
1
down vote
I understand you have this path and you need to draw a line inside following the border. My solution is using the <feMorphology>
filter with the operator="erode"
. I hope this is what you need.
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
add a comment |
up vote
1
down vote
up vote
1
down vote
I understand you have this path and you need to draw a line inside following the border. My solution is using the <feMorphology>
filter with the operator="erode"
. I hope this is what you need.
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
I understand you have this path and you need to draw a line inside following the border. My solution is using the <feMorphology>
filter with the operator="erode"
. I hope this is what you need.
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
<svg viewBox="-10 -10 120 120" width="300">
<defs>
<filter id="erode">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="2"/>
<feFlood flood-color="white" result="white" />
<feComposite in ="white" in2="eroded" operator="in" />
</filter>
<filter id="erode1">
<feMorphology in="SourceAlpha" result="eroded1"
operator="erode" radius="3"/>
</filter>
<path id="g" d="M0, 0
H50
A20, 20, 0, 1, 0, 100, 50
V75
C50, 125, 0, 85, 0, 85" />
</defs>
<use xlink:href="#g" />
<use xlink:href="#g" filter="url(#erode)" />
<use xlink:href="#g" filter="url(#erode1)" />
</svg>
answered Nov 21 at 14:08
enxaneta
3,9271412
3,9271412
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411999%2ffind-parallel-or-offset-svg-path%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you want a second, identical shape that is simply offset from the first, you can make a copy of the original image and just adjust the starting x, y coordinates in
M
. It's possible that I haven't understood your goal, however. So,M2 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z
would be identical to the original shape, but offset two units on the x-axis from the original shape.– Tex
Nov 21 at 12:38
Have you had a look at
scale
andtranslate
SVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform– Mehdi
Nov 21 at 12:54
@Tex that is wrong it just offsets in the beginning, I need the whole path or individual segments for more clarity. Did you check an update on my question.The image will give you more clarity.
– user10519853
Nov 21 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 at 13:16
I mistakenly thought we were dealing with a collection of relative paths (i.e. each path starts off where the last one ends). It also was not clear to me from your original question that your goal was to draw a smaller version of the original image inside the original image.
– Tex
Nov 21 at 14:28