search

ShukantPal / pixi-essentials

The best goodies for performant, enterprise-level applications built on PixiJS
https://api.pixijs.io
MIT License
275 stars 36 forks source link

PixJS SVG with radialGradient not working #101

Open duongxinh2003 opened 8 months ago

duongxinh2003 commented 8 months ago

My SVG parses from string like this code below:

let parser = new DOMParser();
    let document = parser.parseFromString('<svg width="312" height="308" viewBox="0 0 312 308" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
        '<path fill-rule="evenodd" clip-rule="evenodd" d="M162.894 163.758C199.928 163.758 233.778 174.265 264.445 195.278C295.112 216.238 310.896 231.202 311.798 240.17C312.7 249.084 310.578 263.279 305.431 282.753C300.285 302.175 262.429 309.948 191.863 306.075C121.245 302.201 71.6366 292.57 43.039 277.182C14.4944 261.74 4.99726 244.495 14.5475 225.445C24.0977 206.395 41.9513 191.351 68.1083 180.314C94.2653 169.277 125.861 163.758 162.894 163.758Z" fill="url(#paint0_radial_40_5)"/>\n' +
        '<path fill-rule="evenodd" clip-rule="evenodd" d="M146.022 118.389L173.559 119.742L218.843 122.449L241.604 123.802L257.521 126.587L273.279 131.045C268.186 132.849 262.588 135.423 256.487 138.766L245.981 145.054C232.346 153.491 219.241 160.336 206.666 165.589C193.88 170.736 182.95 176.945 173.877 184.215C164.592 191.537 161.462 205.44 164.486 225.922C166.237 237.49 167.723 246.458 168.943 252.826C168.518 251.977 168.12 251.499 167.749 251.393L162.178 249.403C158.889 248.289 151.063 246.06 138.7 242.717C126.179 239.321 112.464 234.89 97.5549 229.425C82.4867 223.641 69.4613 217.83 58.4785 211.993L56.5685 210.799L144.749 203.556L146.022 118.389Z" fill="#7D5726"/>\n' +
        '<defs>\n' +
        '<radialGradient id="paint0_radial_40_5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(118.645 156.038) rotate(-55.8626) scale(151.727 276.388)">\n' +
        '<stop offset="0.568627" stop-color="#704910" stop-opacity="0.631373"/>\n' +
        '<stop offset="0.917647" stop-color="#AFA025" stop-opacity="0"/>\n' +
        '</radialGradient>\n' +
        '</defs>\n' +
        '</svg>\n', "image/svg+xml");
    let iconSvg = document.getElementsByTagName('svg')[0];
let svgScene = new SVGScene(iconSvg);
 const container= new PIXI.Container()
container.addChild(svgScene)

For the first path, I used radialGradient with id='paint0_radial_40_5' but not working. The second path works normally image