How to get rid of thin border of SVG feMorphology/feColorMatrix effect
0
I would like te create white outline around my drawing but when viewing the result in Firefox or Chrome I see a very thin border around the outline.
Also in Inkscape I see the outline as black.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
operator="dilate"
radius="2"
in="SourceAlpha" />
<feColorMatrix
id="feColorMatrix46"
values="1 0 0 1 0 0 1 0 1 0 0 0 1 1 0 0 0 0 1 0 "
result="result1" />
<feMerge
id="feMerge48">
<feMergeNode
inkscape:collect="always"
id="feMergeNode52"
in="result1" />
<feMergeNode
inkscape:collect="always"
id="feMergeNode4537"
in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>
svg inkscape svg-filters
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
add a comment |
0
I would like te create white outline around my drawing but when viewing the result in Firefox or Chrome I see a very thin border around the outline.
Also in Inkscape I see the outline as black.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
operator="dilate"
radius="2"
in="SourceAlpha" />
<feColorMatrix
id="feColorMatrix46"
values="1 0 0 1 0 0 1 0 1 0 0 0 1 1 0 0 0 0 1 0 "
result="result1" />
<feMerge
id="feMerge48">
<feMergeNode
inkscape:collect="always"
id="feMergeNode52"
in="result1" />
<feMergeNode
inkscape:collect="always"
id="feMergeNode4537"
in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>
svg inkscape svg-filters
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
add a comment |
0
0
0
I would like te create white outline around my drawing but when viewing the result in Firefox or Chrome I see a very thin border around the outline.
Also in Inkscape I see the outline as black.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
operator="dilate"
radius="2"
in="SourceAlpha" />
<feColorMatrix
id="feColorMatrix46"
values="1 0 0 1 0 0 1 0 1 0 0 0 1 1 0 0 0 0 1 0 "
result="result1" />
<feMerge
id="feMerge48">
<feMergeNode
inkscape:collect="always"
id="feMergeNode52"
in="result1" />
<feMergeNode
inkscape:collect="always"
id="feMergeNode4537"
in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>
svg inkscape svg-filters
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
I would like te create white outline around my drawing but when viewing the result in Firefox or Chrome I see a very thin border around the outline.
Also in Inkscape I see the outline as black.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
operator="dilate"
radius="2"
in="SourceAlpha" />
<feColorMatrix
id="feColorMatrix46"
values="1 0 0 1 0 0 1 0 1 0 0 0 1 1 0 0 0 0 1 0 "
result="result1" />
<feMerge
id="feMerge48">
<feMergeNode
inkscape:collect="always"
id="feMergeNode52"
in="result1" />
<feMergeNode
inkscape:collect="always"
id="feMergeNode4537"
in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>
svg inkscape svg-filters
svg inkscape svg-filters
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
edited Nov 18 '18 at 1:01
Michael Mullany
19.7k25881
19.7k25881
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
asked Nov 14 '18 at 10:25
Martin ŽdilaMartin Ždila
1,66411729
1,66411729
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
I've rewriten your filter. For feFlood I'm using flood-color="gold"for you to see the "border". You can replace it with white or any other color. My only concern is that I don't how it will respond in inkscape. I hope it helps.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color usingfeFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
– enxaneta
Nov 14 '18 at 12:38
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
);
);
draft saved
draft discarded
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%2f53297955%2fhow-to-get-rid-of-thin-border-of-svg-femorphology-fecolormatrix-effect%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I've rewriten your filter. For feFlood I'm using flood-color="gold"for you to see the "border". You can replace it with white or any other color. My only concern is that I don't how it will respond in inkscape. I hope it helps.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color usingfeFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
– enxaneta
Nov 14 '18 at 12:38
add a comment |
1
I've rewriten your filter. For feFlood I'm using flood-color="gold"for you to see the "border". You can replace it with white or any other color. My only concern is that I don't how it will respond in inkscape. I hope it helps.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color usingfeFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
– enxaneta
Nov 14 '18 at 12:38
add a comment |
1
1
1
I've rewriten your filter. For feFlood I'm using flood-color="gold"for you to see the "border". You can replace it with white or any other color. My only concern is that I don't how it will respond in inkscape. I hope it helps.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
I've rewriten your filter. For feFlood I'm using flood-color="gold"for you to see the "border". You can replace it with white or any other color. My only concern is that I don't how it will respond in inkscape. I hope it helps.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8">
<defs
id="defs2">
<filter
style="color-interpolation-filters:sRGB"
id="filter42"
inkscape:label="filter0">
<feMorphology
id="feMorphology44"
in="SourceAlpha"
result="expanded"
operator="dilate"
radius="2"/>
<feFlood flood-color="gold" result="result1" />
<feComposite in ="result1" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g4541"
transform="translate(20.312484,-40.090429)"
style="filter:url(#filter42)">
<ellipse
ry="46.113098"
rx="48.85342"
cy="177.74852"
cx="72.854912"
id="path26"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
<rect
transform="rotate(49.327242)"
ry="0"
y="37.731022"
x="203.59937"
height="40.205711"
width="62.978706"
id="rect28"
style="fill:#ff0000;stroke:none;stroke-width:0.26458332" />
</g>
</g>
</svg>edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
edited Nov 14 '18 at 11:25
Peter Collingridge
7,97633452
7,97633452
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
answered Nov 14 '18 at 10:57
enxanetaenxaneta
7,7842518
7,7842518
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color usingfeFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
– enxaneta
Nov 14 '18 at 12:38
add a comment |
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color usingfeFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
– enxaneta
Nov 14 '18 at 12:38
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
Thanks, it even looks the same in Inkscape. Just out of curiosity do you know what could be causing that thin border in my example?
– Martin Ždila
Nov 14 '18 at 12:06
1
1
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color using
feFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design– enxaneta
Nov 14 '18 at 12:38
Apparently there is a bug related to the alpha channel for feColorMatrix. Besides it's much easier to set the color using
feFlood. You can get a explanation for the filter I've used in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design– enxaneta
Nov 14 '18 at 12:38
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53297955%2fhow-to-get-rid-of-thin-border-of-svg-femorphology-fecolormatrix-effect%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
