Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RadialGradient is not shown correctly #283

Open
talentjeff opened this issue Jan 18, 2024 · 1 comment
Open

RadialGradient is not shown correctly #283

talentjeff opened this issue Jan 18, 2024 · 1 comment

Comments

@talentjeff
Copy link

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
image

Expected behavior
It should look like:
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser chrome
  • Version 120
@HackbrettXXX
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants