Some elements are incorrectly rendered as black

[BluePointLilac]

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="88">
  <defs>
    <linearGradient x1="92.453%" y1="54.937%" x2="4.403%" y2="54.525%" id="a">
      <stop stop-color="#d6b28f" offset="0%" />
      <stop stop-color="#f5dcc6" offset="21.356%" />
      <stop stop-color="#fff8f0" offset="66.144%" />
      <stop stop-color="#d0a982" offset="100%" />
    </linearGradient>
    <radialGradient cy="37.5%" fx="50%" fy="37.5%" r="64.275%" id="b">
      <stop stop-color="#fff7e1" offset="0%" />
      <stop stop-color="#ebcfb4" offset="62.255%" />
      <stop stop-color="#c0946b" offset="100%" />
    </radialGradient>
    <linearGradient x1="0%" y1="102.85%" x2="88.089%" y2="6.57%" id="c">
      <stop stop-color="#8c5e3d" offset="0%" />
      <stop stop-color="#c69972" offset="100%" />
    </linearGradient>
    <linearGradient x1="50.149%" y1="0%" x2="50.149%" y2="108.575%" id="d">
      <stop stop-color="#f9d3ac" offset="0%" />
      <stop stop-color="#e7ba8f" offset="100%" />
    </linearGradient>
    <linearGradient x1="98.433%" y1=".419%" x2="-17.507%" y2="51.203%" id="e">
      <stop stop-color="#c09371" offset="0%" />
      <stop stop-color="#c69872" offset="100%" />
    </linearGradient>
    <linearGradient x1="76.332%" y1="63.99%" x2="12.292%" y2="10.215%" id="f">
      <stop stop-color="#f0c69d" offset="0%" />
      <stop stop-color="#fee3c9" offset="100%" />
    </linearGradient>
    <linearGradient x1="6.547%" y1="59.618%" x2="91.41%" y2="37.059%" id="g">
      <stop stop-color="#cb8c53" offset="0%" />
      <stop stop-color="#f2ceab" offset="100%" />
    </linearGradient>
    <linearGradient x1="6.547%" y1="59.618%" x2="91.41%" y2="37.059%" id="h">
      <stop stop-color="#f2ceab" offset="0%" />
      <stop stop-color="#cb8c53" offset="100%" />
    </linearGradient>
    <linearGradient x1="111.764%" y1="100%" x2="3.493%" y2="100%" id="i">
      <stop stop-color="#ffefb8" stop-opacity="0" offset="0%" />
      <stop stop-color="#f7e094" stop-opacity=".37" offset=".01%" />
      <stop stop-color="#f8e195" stop-opacity=".66" offset="6.266%" />
      <stop stop-color="#ffeba5" offset="100%" />
    </linearGradient>
    <filter x="-9.1%" y="-300%" width="118.2%" height="700%" id="j">
      <feGaussianBlur stdDeviation=".592" in="SourceGraphic" />
    </filter>
    <linearGradient x1="87.514%" y1="20.876%" x2="40.009%" y2="50.512%" id="k">
      <stop stop-color="#fee3c9" offset="0%" />
      <stop stop-color="#f0c69d" offset="100%" />
    </linearGradient>
    <linearGradient x1="111.764%" y1="100%" x2="3.493%" y2="100%" id="l">
      <stop stop-color="#f7e094" stop-opacity=".37" offset=".01%" />
      <stop stop-color="#ffeba5" offset="100%" />
    </linearGradient>
    <path d="M30.587 33.996L20.236 6.426h7.538l6.621 17.421L45.396 6.426h7.639L35.819 34.161a.948.948 0 0 1-.805.446h-3.541a.944.944 0 0 1-.886-.611z" id="n" />
    <filter x="-1.5%" y="-1.8%" width="106.1%" height="107.1%" id="m">
      <feOffset dx="1" dy="1" in="SourceAlpha" />
      <feColorMatrix values="0 0 0 0 0.536345109 0 0 0 0 0.378633032 0 0 0 0 0.250491971 0 0 0 1 0" />
    </filter>
    <filter x="-1.5%" y="-1.8%" width="106.1%" height="107.1%" id="o">
      <feOffset dy="1" in="SourceAlpha" />
      <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" />
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.654901961 0 0 0 0 0.509803922 0 0 0 0.634915865 0" />
    </filter>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <g fill-rule="nonzero">
      <path d="M14.665 15.206l5.453 20.884h36.386l5.197-20.884-4.37-2.404-1.654 2.404c-.455.534-3.584 4.006-8.821 1.869-4.205-1.715-5.513-4.807-5.513-6.41s.551-5.341.551-5.341h-7.167s.563 4.273.276 5.341c-.215.801-.827 4.807-5.789 6.41s-7.846-.658-8.821-1.602c-1.103-1.068-1.93-3.205-1.93-3.205l-3.798 2.938z" fill="url(#a)" />
      <g fill="url(#b)">
        <circle cx="15.552" cy="11.833" r="5.916" />
        <circle cx="38.035" cy="5.916" r="5.916" />
        <circle cx="59.334" cy="11.833" r="5.916" />
      </g>
    </g>
    <g transform="translate(2 30.174)">
      <path fill="#e8c7aa" d="M16.862 0L0 22.483l19.188 18.116 17.199 5.137 15.588-3.729 20.798-19.524L55.911 0z" />
      <g fill-rule="nonzero">
        <path d="M0 22.483h19.524l16.862 34.316zm72.773 0H53.248L36.386 56.798z" fill="url(#c)" />
        <path fill="url(#d)" d="M36.386 0L19.524 22.483h33.724z" />
        <path fill="url(#e)" d="M36.386 56.798L19.524 22.483h33.724z" />
        <path fill="url(#f)" d="M16.862 0h19.524L19.524 22.483z" />
        <path fill="url(#g)" d="M19.524 22.483H0L16.862 0z" />
        <path fill="url(#h)" d="M53.248 22.483h19.524L55.911 0z" />
      </g>
      <path fill-opacity=".29" fill="url(#i)" filter="url(#j)" d="M72.324 21.891H53.248v.592h19.524z" />
      <path fill="url(#k)" d="M55.911 0H36.386l16.862 22.483z" fill-rule="nonzero" />
      <path fill-opacity=".5" fill="url(#l)" filter="url(#j)" d="M19.46 21.891H.444L0 22.483h19.524z" />
      <use fill="#000" filter="url(#m)" xlink:href="#n" />
      <use fill="#fff" xlink:href="#n" />
      <use fill="#000" filter="url(#o)" xlink:href="#n" />
    </g>
  </g>
</svg>

The left side uses the SvgViewbox, and the right side is the rendering of the Edge browser.

[paulushub]

Sorry, filters are not currently supported.

[xingzuhui]

Sorry, filters are not currently supported.

I have the same problem. Will you update it to support this?

[paulushub]

@BluePointLilac @xingzuhui Please can you provide some information on how you are using this library?

Background (of the question)

• Currently, SharpVectors supports the low-level renderers supported by WPF (Drawing and Geometry).
• Unfortunately, the only support available at this level filter effects (bitmap effect) is software-based, which is slow and depreciated it.
• To support filter effects at this level, we will have to convert the rendered vector to bitmap and apply the filters.
• The implication is that you will loose vector graphics and only get static image (bitmap).
• If you application requires such support, it will be a problem.
• Now, the next higher level where shader effect is available is DrawingVisual level. However, this cannot be implemented in XAML, so you are restricted to using controls provided by SharpVectors.