如何摆脱SVG feMorphology / feColorMatrix效果的细边框

Question

我想在图形周围创建白色轮廓，但是在Firefox或Chrome浏览器中查看结果时，轮廓周围的边框非常细。

在Inkscape中，我也看到轮廓为黑色。

<?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>

Answer 1

我已重写您的过滤器。对于feFlood，我正在使用flood-color="gold"来让您看到“边框”。您可以将其替换为white或任何其他颜色。我唯一关心的是，我不知道它如何在inkscape中响应。希望对您有所帮助。

<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>