RadialGradient is not shown correctly

[talentjeff]

Describe the bug A clear and concise description of what the bug is. RadialGradient is not shown correctly in PDF jsPDF - Version 2.5.1 svg2pdf - Version 2.23

To Reproduce Steps to reproduce the behavior:

1. Open http://raw.githack.com/yWorks/svg2pdf.js/master/index.html
2. Paste the svg <svg xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" xmlns:oryx="http://oryx-editor.org" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" generated="java" height="255" id="svg-canvas" oryx:signavioversion="17.10.1" version="1.1" width="150" xmlns="http://www.w3.org/2000/svg"> <defs></defs> <g font-family="'Open Sans', 'Kanit','Noto Sans CJK HK', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans Thai Looped','Ezra SIL', 'DejaVu Sans', HanaMinA, HanaMinB, sans-serif" font-size="12" font-size-adjust="none" font-style="normal" font-variant="normal" font-weight="normal" stroke="black"> <g class="stencils" transform="translate(-85, -45)"> <g class="me"></g> <g class="children"> <g id="svg-sid-4323BC14-84CB-44EB-9032-A0648509ABC9"> <g class="stencils" transform="translate(110, 70)"> <g class="me"> <g xmlns:ns0="http://oryx-editor.org" ns0:minimumsize="50 40" pointer-events="fill" title="Task"> <defs> <radialGradient cx="10%" cy="10%" fx="10%" fy="10%" id="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48background" r="100%"> <stop offset="0" stop-color="#ffffff" stop-opacity="1"></stop> <stop id="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48fill_el" offset="100%" stop-color="#ffffcc" stop-opacity="1"></stop> </radialGradient> </defs> <rect fill="url(#sid-06eaafb6-4e90-4978-88f0-ece69c59cb48background) #ffffcc" height="80" id="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48bg_frame" ns0:resize="vertical horizontal" rx="10" ry="10" stroke="#000000" stroke-width="1" width="100" x="0" y="0"></rect> <text ns0:align="center middle" xmlns:ns1="http://oryx-editor.org" ns1:fittoelem="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48text_frame" font-size="12" xmlns:ns2="http://oryx-editor.org" ns2:fontsize="12" id="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48text_name" letter-spacing="-0.01px" stroke="black" stroke-width="0pt" text-anchor="middle" xmlns:ns3="http://oryx-editor.org" ns3:textwidth="94" transform="rotate(0)" x="50" y="40"> <tspan dy="-2" x="50" y="40">Post Incoming <v:newlinechar></v:newlinechar> </tspan> <tspan dy="10" x="50" y="40">Payments</tspan> </text> <g display="inherit" id="sid-06eaafb6-4e90-4978-88f0-ece69c59cb48none"></g> <title>Task</title> </g> </g> <g class="children"></g> <g class="edge"></g> <g class="topchildren"></g> <g class="overlays stripable-element-force"></g> </g> <g class="controls"> <g class="dockers"></g> <g class="magnets"></g> </g> </g> <g id="svg-sid-E11EE87F-0DB1-4526-9B46-ADC41FAAF415"> <g class="stencils" transform="translate(110, 195)"> <g class="me"> <g xmlns:ns0="http://oryx-editor.org" ns0:minimumsize="50 40" pointer-events="fill" title="Task"> <defs> <radialGradient cx="10%" cy="10%" fx="10%" fy="10%" id="sid-d9001438-65ec-4c50-baab-3c6c97177004background" r="100%"> <stop offset="0" stop-color="#ffffff" stop-opacity="1"></stop> <stop id="sid-d9001438-65ec-4c50-baab-3c6c97177004fill_el" offset="100%" stop-color="#ffffcc" stop-opacity="1"></stop> </radialGradient> </defs> <rect fill="url(#sid-d9001438-65ec-4c50-baab-3c6c97177004background) #ffffcc" height="80" id="sid-d9001438-65ec-4c50-baab-3c6c97177004bg_frame" ns0:resize="vertical horizontal" rx="10" ry="10" stroke="#000000" stroke-width="1" width="100" x="0" y="0"></rect> <text ns0:align="center middle" xmlns:ns1="http://oryx-editor.org" ns1:fittoelem="sid-d9001438-65ec-4c50-baab-3c6c97177004text_frame" font-size="12" xmlns:ns2="http://oryx-editor.org" ns2:fontsize="12" id="sid-d9001438-65ec-4c50-baab-3c6c97177004text_name" letter-spacing="-0.01px" stroke="black" stroke-width="0pt" text-anchor="middle" xmlns:ns3="http://oryx-editor.org" ns3:textwidth="94" transform="rotate(0)" x="50" y="40"> <tspan dy="-2" x="50" y="40">Manage Journal <v:newlinechar></v:newlinechar> </tspan> <tspan dy="10" x="50" y="40">Entries</tspan> </text> <g display="inherit" id="sid-d9001438-65ec-4c50-baab-3c6c97177004none"></g> <title>Task</title> </g> </g> <g class="children"></g> <g class="edge"></g> <g class="topchildren"></g> <g class="overlays stripable-element-force"></g> </g> <g class="controls"> <g class="dockers"></g> <g class="magnets"></g> </g> </g> </g> <g class="edge"></g> <g class="topchildren"></g> <g class="overlays stripable-element-force"></g> </g> </g> </svg>
3. see the result in the pdf. RadialGradient is not shown

Expected behavior It should look like:

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• Version 120

[HackbrettXXX]

You're using percentage values for the gradient attributes. These are currently not supported. Please try using pixel values and see if the issue persists.