Mixing
Find Parallel or Offset SVG path
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
asked Nov 21 '18 at 12:25
user10519853user10519853
156
add a comment |
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
asked Nov 21 '18 at 12:25
user10519853user10519853
156
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 zwould be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 '18 at 12:38
Have you had a look atscaleandtranslateSVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 '18 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 '18 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 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 '18 at 14:28
add a comment |
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
asked Nov 21 '18 at 12:25
user10519853user10519853
156
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
asked Nov 21 '18 at 12:25
user10519853user10519853
156
asked Nov 21 '18 at 12:25
user10519853user10519853
156
edited Nov 21 '18 at 12:50
user10519853
asked Nov 21 '18 at 12:25
user10519853user10519853
156
asked Nov 21 '18 at 12:25
user10519853user10519853
156
asked Nov 21 '18 at 12:25
user10519853user10519853
156
156
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 zwould be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 '18 at 12:38
Have you had a look atscaleandtranslateSVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 '18 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 '18 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 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 '18 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 zwould be identical to the original shape, but offset two units on the x-axis from the original shape.
– Tex
Nov 21 '18 at 12:38
Have you had a look atscaleandtranslateSVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
– Mehdi
Nov 21 '18 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 '18 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 at 13:16
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 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 '18 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 '18 at 14:28
add a comment |
2 Answers
2
active
oldest
votes
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 '18 at 16:47
ccprogccprog
9,37021127
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
add a comment |
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>answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 16:47
ccprogccprog
9,37021127
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
add a comment |
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 '18 at 16:47
ccprogccprog
9,37021127
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
add a comment |
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 '18 at 16:47
ccprogccprog
9,37021127
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 '18 at 16:47
ccprogccprog
9,37021127
answered Nov 21 '18 at 16:47
ccprogccprog
9,37021127
answered Nov 21 '18 at 16:47
ccprogccprog
9,37021127
answered Nov 21 '18 at 16:47
ccprogccprog
9,37021127
9,37021127
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
add a comment |
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
can you show any example for arcs?
– user10519853
Nov 26 '18 at 8:20
add a comment |
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>answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
add a comment |
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>answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
add a comment |
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>answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
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 '18 at 14:08
enxanetaenxaneta
7,6942518
answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
answered Nov 21 '18 at 14:08
enxanetaenxaneta
7,6942518
7,6942518
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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 zwould be identical to the original shape, but offset two units on the x-axis from the original shape.– Tex
Nov 21 '18 at 12:38
Have you had a look at
scaleandtranslateSVG transforms? developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform– Mehdi
Nov 21 '18 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 '18 at 12:55
you could apply a scale transform, that should be pretty close. e.g. transform="scale(0.9)"
– Robert Longson
Nov 21 '18 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 '18 at 14:28