Some elements are incorrectly rendered as black

BluePointLilac commented 1 year ago

<?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 commented 1 year ago

Sorry, filters are not currently supported.

xingzuhui commented 8 months ago

Sorry, filters are not currently supported.

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

paulushub commented 8 months ago

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

ElinamLLC / SharpVectors

Some elements are incorrectly rendered as black #244

Background (of the question)