Как избавиться от тонкой границы эффекта SVG feMorphology / feColorMatrix - PullRequest
Новая
       45

Как избавиться от тонкой границы эффекта SVG feMorphology / feColorMatrix

0 голосов
/ 14 ноября 2018

Я хотел бы создать белый контур вокруг моего чертежа, но при просмотре результатов в Firefox или Chrome я вижу очень тонкую границу вокруг контура.

enter image description here

Также в Inkscape я вижу контур черным.

enter image description here

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

1 Ответ

0 голосов
/ 14 ноября 2018

Я переписал ваш фильтр.Для 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>
...