Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'markerWidth' and 'markerHeight' svg attributes getting converted to 'marker-width' and 'marker-height'

See original GitHub issue

The SVG attributes markerWidth and markerHeight getting converted to marker-width and marker-height which are invalid attributes.

Input:

<marker id="arrow" viewBox="-10 -10 20 20" markerWidth="20" markerHeight="20" />

Preact output:

<marker id="arrow" viewBox="-10 -10 20 20" marker-width="20" marker-height="20" />

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:8 (7 by maintainers)

Top GitHub Comments

2reactions

moklickcommented, Mar 12, 2020

oh no… I was using v10.3.2.

1reaction

jamesb3llcommented, Mar 11, 2020

Are you using the latest version of Preact? This was fixed in v10.3.3 with https://github.com/preactjs/preact/pull/2366 If you have a look at the tests it covers this test case for markerWidth and markerHeight 🙂

Top Results From Across the Web

markerWidth - SVG: Scalable Vector Graphics - MDN Web Docs

The markerWidth attribute represents the width of the viewport into which the is to be fitted when it is rendered according to the...

Painting: Filling, Stroking and Marker Symbols - SVG 1.1 - W3C

Properties 'fill' and 'stroke' take on a value of type <paint>, ... If markerUnits="strokeWidth", markerWidth, markerHeight and the contents ...

SVG markers broken in internet explorer? - Stack Overflow

Add the stroke: none; in tour path style. Like this: <svg viewBox="0 0 100 100"> <defs> <marker id="arrow" markerWidth="5" markerHeight="6" refx="5" ...

Re-purposing Icons as Markers — Using SVG with CSS3 and ...

In the book, we discuss how the viewBox attribute on the <marker> element ... using markerWidth and markerHeight ; by default, your viewBox...

SVG markerWidth Attribute - GeeksforGeeks

The markerWidth attribute indicates the width of the viewport within which ... < svg viewBox = "-20 -5 1220 520" ... markerHeight =...