SVG Gradients with Linear and Radial Gradient not loading.

coreygo

Greetings all, I'm trying to display a 1K SVG via Processing. The shape is positioned and sized correctly but the linear or radial gradients aren't displayed. Instead the shape takes the fill color. Here's the SVG I'm using (Letter C with gradient):

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);stroke:url(#SVGID_2_);stroke-miterlimit:10;} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-170.97" y1="532.2973" x2="28.5994" y2="731.8667" gradientTransform="matrix(1.4862 0 0 -1.4862 315.3958 1149.0005)"> <stop offset="0" style="stop-color:#8951A0"/> <stop offset="0.75" style="stop-color:#AF3666"/> </linearGradient> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-171.29" y1="732.1868" x2="28.9195" y2="531.9772" gradientTransform="matrix(1.4862 0 0 -1.4862 315.3958 1149.0005)"> <stop offset="0" style="stop-color:#8951A0"/> <stop offset="0.75" style="stop-color:#AF3666"/> </linearGradient> <path class="st0" d="M209.65,419.25c-53.8,0-107.4-20.4-148.3-61.3c-81.8-81.8-81.8-214.8,0-296.6s214.8-81.8,296.6,0l-63,63 c-47-47-123.5-47-170.4,0c-47,47-47,123.5,0,170.4s123.5,47,170.4,0l63,63C317.05,398.85,263.45,419.25,209.65,419.25z"/> </svg>

I've tried using: PShapeSVG.LinearGradient but I can't seem to find a working method at this point. The SVG loads fine directly in Firefox and Chrome on OS X.

Any pointers? Peace, Corey

behreajj

Hello from the future! When I tried your code in Processing 3.3.3 (rev 0260), I received a message in the console which stated Ignoring <style> tag. So I revised the path st0 to say <path class="st0" fill="url(#SVGID_1_)". Processing then recognized the gradient. Too late to be helpful, I suppose, but I've been working on how to dynamically change an imported SVG's, I wish the Gradient class you mentioned was better documented. Best!