Skip to content

Instantly share code, notes, and snippets.

@natevw

natevw/prince_svg_js_namespace.html

Last active January 21, 2020 02:59
Show Gist options
  • Save natevw/59962c3499a72e9c3ced42150e36b21e to your computer and use it in GitHub Desktop.
Save natevw/59962c3499a72e9c3ced42150e36b21e to your computer and use it in GitHub Desktop.
Download ZIP
Repro for Prince XML issue rendering SVG `<use />` elements from JavaScript/React ("warning: svg: use: @xLink:href required")
Raw
prince_svg_js_namespace.html
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Testing SVG rendering issue of Prince 13.1</title>
</head><body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<rect id="testing123" x="0" y="0" width="20" height="20" />
</defs>
<use xlink:href="#testing123" fill="red" />
<g transform="translate(25)">
<use id="configured_via_js" fill="green"/>
</g>
</svg>
<script>
var useEl = document.getElementById('configured_via_js');
useEl.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "#testing123");
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment