Skip to content

[Bug] SVG style attribute not parsed correctly #758

@ArthurG94

Description

@ArthurG94

Describe the bug

The output when displaying an SVG file with Two.js in canvas mode does not match the original file.
Several issues:

  • Parsing of the style attribute does not properly handle whitespace and indentation.
  • font-size with a unit is not recognized.
  • Creation of Two.Text elements does not support tspan.

To Reproduce
Steps to reproduce the behavior:

two.interpret(svg)
/* with svg: 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

<rect x="10" y="10" fill="#F7941E" width="380" height="380"/>
	<text style="
	font-weight:bold;
	font-size:144px;
	font-family:Arial;
	fill:#000000;
	"
	x="45" y="250"
	><tspan>Arial</tspan></text>
</svg>
*/

Screenshots
Rendered output on the left.
Original file on the right.
Image

Environment (please select one):

  • Code executes in browser (e.g: using script tag to load library)
  • Packaged software (e.g: ES6 imports, react, angular, vue.js)
  • Running headless (usually Node.js)

Desktop (please complete the following information):

  • OS: MacOS 15.3
  • Browser: Chromium (Brave)
  • Version: 1.73.105 Chromium: 131.0.6778.265

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions