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

SVGLoader: recognize style definitions inside defs tag #23533

Merged
merged 2 commits into from
Feb 22, 2022

Conversation

nkrkv
Copy link
Contributor

@nkrkv nkrkv commented Feb 19, 2022

Hello! The current implementation of SVGLoader never traverses nodes inside <defs> tag. But besides geometry, it may contain CSS style definitions that should be accessible to paths outside the <defs>.

Here's an SVG (included in the PR):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="300"
   height="300"
   viewBox="0 0 79.374998 79.375002"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs2">
     <style type="text/css">
      <![CDATA[
       .str0 {stroke:#FF0000;stroke-width:3}
       .fil0 {fill:#FF9900}
      ]]>
     </style>
  </defs>
  <g
     id="layer1">
    <path
       class="str0 fil0"
       id="path848"
       d="m 137.38278,139.05634 -2.47931,71.54147 62.00995,43.49145 -68.80613,19.74955 L 105.9066,346.25338 65.861386,286.91781 -9.8693534,288.18103 34.18748,231.76007 9.5839998,160.12621 76.857831,184.59172 Z"
       transform="matrix(0.26458333,0,0,0.26458333,15.953737,-22.418478)" />
  </g>
</svg>

This is a simplified example of typical Adobe Illustrator and CorelDRAW output: they put styles in <defs>. This SVG is correctly rendered in yellow + red with Firefox and Chrome, but incorrectly with three.js:

localhost_8080_examples_ (1)

This patch does the fix:

localhost_8080_examples_

@yomboprime
Copy link
Collaborator

Seems right to me. Thanks!

@yomboprime
Copy link
Collaborator

@mrdoob this seems right to be merged.

@WestLangley WestLangley added this to the r138 milestone Feb 20, 2022
@mrdoob mrdoob merged commit 36b4e0b into mrdoob:dev Feb 22, 2022
@mrdoob
Copy link
Owner

mrdoob commented Feb 22, 2022

Thanks!

donmccurdy pushed a commit to donmccurdy/three.js that referenced this pull request Mar 10, 2022
* fix(SVGLoader): recognize style definitions inside defs tag

* style(SVGLoader): code formatting
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

Successfully merging this pull request may close these issues.

None yet

4 participants