Better SVG Support for namespaced attributes #2250

ledbruno · 2014-09-26T11:58:32Z

We are trying to use React for a SVG document. But we are facing problems for namespaced attributes.

For instance, this element cant be constructed with React:


<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>

We cant build a JSX for a xmlns:xlink attribute. Is there any way to solve this?

The text was updated successfully, but these errors were encountered:

ledbruno · 2014-09-28T14:20:05Z

The exception that is raised, when we try to put some namespaced attributes:
"Error: Namespace attributes are not supported. ReactJSX is not XML."

edmspjp · 2014-09-28T16:16:00Z

I already faced the same issue for image element. I opened an issue and
meanwhile I'm using the following:

{__html:

"<image id=" + this.props.id + " x=" + this.props.x + " y=" +
this.props.y +

" width='"+ (this.props.width-20) +"' height='"+
(this.props.height-(this.props.text!=='none'?40:20)) +

"' fill='#90' stroke='#000' style='cursor:pointer' xlink:href='" +
this.props.image +

"'/>"

}

}/>

2014-09-28 15:20 GMT+01:00 Bruno Ledesma notifications@github.com:

The exception that is raised, when we try to put some namespaced
attributes:
"Error: Namespace attributes are not supported. ReactJSX is not XML."

—
Reply to this email directly or view it on GitHub
#2250 (comment).

Paulo Jorge Dias
: à procura do erro certo
: looking for the right error

bobby · 2015-04-10T02:15:01Z

+1 on this. React could be a really great platform for doing SVG, but it's hard to use SVG to full effect without xlink:href and friends.

dujuanxian · 2015-05-25T05:50:33Z

Hi @edmspjp I had the same issue, but it seems add dangerouslySetInnerHTML to tag still has the same problem. And take the whole svg tag as dangerouslySetInnerHTML attr to its parent tag works for me. I am not sure if you met the problem before.

var svgTag='<svg><image..></svg>';

<div dangerouslySetInnerHTML={__html: svgTag} />

lennerd · 2015-07-05T11:39:17Z

Any updates on or further plans for supporting SVG namespaced elements and attributes?

willhackett · 2015-07-27T05:56:32Z

Seems it's still necessary to implement SVGs using dangerouslySetInnerHTML.

lennerd · 2015-07-27T07:53:27Z

I can recommend to use a combination of d3 and react. When ever I need to use namespaced attributes I use d3 in the componentDidMount method.

ghost · 2015-07-29T19:46:54Z

+1 for this request. I need React to render an inline SVG that has an image inside a clipping path, and it's getting hung on the xmlns:xlink="http://www.w3.org/1999/xlink" attr in the <svg> tag.

ghost · 2015-07-29T21:16:36Z

@dujuanxian's workaround helped me get through this, provided double (not single) braces are used, of course:

var svgString = '<svg /* React-unfriendly code here... */ </svg>';
<div dangerouslySetInnerHTML={{ __html: svgString }} />

lennerd · 2015-07-29T22:11:05Z

Just to show an example using d3 for the non-react-svg-stuff:

https://github.com/FH-Potsdam/shifted-maps/blob/master/app/client/components/place-map.js#L21-L40

I used d3 here, because React is not able to set href attribute of image tags.

Nukesor · 2015-09-01T12:52:50Z

+1 Any updates on this? Thx for the workaround. Hope it'll work until this is fixed.

edmspjp · 2015-09-01T13:08:35Z

See in How SVG Fragment Identifiers Work
https://css-tricks.com/svg-fragment-identifiers-work/ a different technic.

2015-07-29 23:12 GMT+01:00 Lennart Hildebrandt notifications@github.com:

Just to show an example using d3 for the non-react-svg-stuff:

https://github.com/FH-Potsdam/shifted-maps/blob/master/app/client/components/place-map.js#L21-L40

I used d3 here, because React is not able to set href attribute of image
tags.

—
Reply to this email directly or view it on GitHub
#2250 (comment).

Paulo Jorge Dias
: à procura do erro certo
: looking for the right error

edvinerikson · 2015-09-01T16:31:37Z

In the master branch I managed to get namespaced attributes to work by using camelCase.
<svg xlinkHref="http://i.imgur.com/w7GCRPb.png" /> renders to <svg xlink:href="http://i.imgur.com/w7GCRPb.png" />

lennerd · 2015-09-01T16:40:26Z

Do you also get the proper namespace attribute for the namespace itself?

edvinerikson · 2015-09-01T16:48:12Z

Not quite sure I understand what you mean. Can you give me an explanation/example?

lennerd · 2015-09-01T17:08:01Z

To be able to get links working, you also need an attribute for the namespace itself.

<svg width="800" height="600">
  <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.github.com/"><!-- ... --></a>
</svg>

Does React handle this in your example?

edvinerikson · 2015-09-01T17:15:11Z

No, it does only pass xlink:href to the DOM node.

sophiebits · 2015-09-01T17:20:25Z

@lennerd My understanding is that the xmlns:xlink is not required in HTML.

edvinerikson · 2015-09-01T17:30:23Z

After looking through the SVG config and some tests it seems like the namespace is passed to the DOM node through the setAttributeNS method.

SVGDOMPropertyConfig.js
DOMPropertyOperations-test.js

lennerd · 2015-09-01T17:49:02Z

Sounds promising. Would be great to remove the d3 dependency.

sophiebits · 2015-09-01T18:33:01Z

Yes, as xlinkHref this should work in the upcoming 0.14 release.

Image embed doesn't work with React 0.13 facebook/react#2250 This branch upgrades to 0.14-rc1, which breaks Reagent reagent-project/reagent#184

mijamo · 2015-12-02T00:22:24Z

xmlns:xlink is not required in HTML only if all the SVG is inline, but it is necessary for some tricky case: In my case, I need to have an image inside defs, to be used then by and to do that xmlns:xlink is apparently necessary.

greypants · 2015-12-10T18:29:26Z

Just confirming that xlinkHref does work in the 0.14.x releases! Hooray.

BryceHayden · 2016-05-17T20:17:50Z

I'm still getting this error, even when using react 0.14.x or the newer react 15.0.2. I'm not sure if I'm just missing something else that needs to be updated. I'm writing a library so I'm only using react, not react-dom...I'm not sure if it's babel or something else.

Here's the code:

import React, { PropTypes } from 'react'
import {doesBrowserSupportSVG} from '../../utils/doesBrowserSupportSvg.js';
var empty_png = require('../../assests/images/star-empty.png');
var whole_png = require('../../assests/images/star-whole.png');
var half_png = require('../../assests/images/star-half.png');

class RenderIcon extends React.Component {
  static propTypes = {
    data: PropTypes.shape({
      fill: PropTypes.oneOf(['whole', 'half', 'empty']).isRequired,
      size: PropTypes.string,
      cursor: PropTypes.string
    })
  };

  constructor(props, context) {
    super(props, context);
    const { size, cursor } = this.props;
    const SIZE = size ? size : '16px';
    const CURSOR = cursor ? cursor : 'auto';
    // options.fill ? options.fill : 'empty';

    this.state = {
      svgStyle: {
        cursor: CURSOR,
        fontSize: SIZE,
        width: SIZE,
        height: SIZE,
        lineHeight: SIZE,
        overflow: 'hidden'
      }
    }
  }

  render() {
    console.log('icon ----> ', `#star-${this.props.data.fill}`);
    if (doesBrowserSupportSVG()) {
      return (
        <svg style={this.state.svgStyle}>
          <use xlink:href={`#star-${this.props.data.fill}`} />
        </svg>
      );
    } else {
      switch (this.props.data.fill) {
        case "whole":
          return <img src={whole_png}/>
        case "half":
          return <img src={half_png}/>
        default:
          return <img src={empty_png}/>
      }
    }
  }
}



export default RenderIcon;

And here's my package.json file:


  "name": "ui-elements",
  "version": "0.6.0",
  "description": "A collect of commonly used ui elements/components written in react and built using webpack",
  "main": "./dist/ui.elements.js",
  "scripts": {
    "build:examples": "babel-node --presets es2015 examples/build.js",
    "build:umd": "webpack src/index.js dist/ui.elements.js --config webpack.config.development.js",
    "build:umd:min": "webpack src/index.js dist/ui.elements.min.js --config webpack.config.production.js",
    "watch": "npm run build:umd -- --watch",
    "build": "npm run build:umd && npm run build:umd:min",
    "check": "npm run lint && npm run test",
    "clean": "rimraf lib dist coverage",
    "lint": "eslint src test examples",
    "preversion": "npm run clean && npm run check",
    "postversion": "git push && git push --tags && npm run clean",
    "prepublish": "npm run clean && npm run build",
    "test": "mocha --compilers js:babel/register --recursive",
    "test:examples": "babel-node examples/tests.js",
    "test:watch": "npm test -- --watch",
    "test:cov": "babel-node $(npm bin)/isparta cover $(npm bin)/_mocha -- --recursive",
    "version": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/QuietOmen/ui-elements.git"
  },
  "keywords": [
    "ui",
    "components",
    "elements",
    "react",
    "rating",
    "star",
    "button",
    "dropdown",
    "modal"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/QuietOmen/ui-elements/issues"
  },
  "homepage": "http://quietomen.github.io/ui-elements",
  "peerDependencies": {
    "react": ">15.0.2"
  },
  "devDependencies": {
    "babel-cli": "^6.4.5",
    "babel-core": "^6.4.5",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.1",
    "babel-plugin-flow-comments": "^6.3.19",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-react": "^6.0.0",
    "babel-preset-stage-0": "^6.0.0",
    "chai": "^3.2.0",
    "css-loader": "^0.23.1",
    "eslint": "^2.10.2",
    "eslint-config-airbnb": "9.0.1",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "isparta": "^4.0.0",
    "mocha": "^2.3.4",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.4.2",
    "postcss-loader": "^0.9.1",
    "react": "^15.0.2",
    "rimraf": "^2.5.0",
    "sass-loader": "^3.1.2",
    "skin-deep": "^0.16.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.11"
  },
  "npmName": "ui-elements",
  "npmFileMap": [
    {
      "basePath": "/dist/",
      "files": [
        "*.js"
      ]
    }
  ]
}

and finally the error (which is the same as others were getting):

ERROR in ./src/components/render-rating/index.js
Module build failed: SyntaxError: /Users/bhayden/Documents/personal/ui-elements/src/components/render-rating/index.js: Namespace tags are not supported. ReactJSX is not XML.

zpao · 2016-05-17T21:01:48Z

@QuietOmen you want <use xlinkHref= not <use xlink:href=

BryceHayden · 2016-05-17T21:13:35Z

@zpao thanks, for some reason I missed that commented above, so thanks for repeating it.

kevinSuttle · 2016-06-28T20:49:33Z

Apologies if I missed this somewhere, but what about styling SVG inline?

<style type="text/css" >

      <![CDATA[
       circle {
         stroke: #006600;
         fill:   #cc0000;
    }

      ]]>
    </style>

zpao · 2016-06-29T00:27:15Z

<style> needs to use dangerouslySetInnerHTML (and you probably always needed to if you were putting them inline).

<style type="text/css" dangerouslySetInnerHTML={{__html: `
  <![CDATA[
    circle {
      stroke: #006600;
      fill:   #cc0000;
    }
  ]]>
`}}/>

kevinSuttle · 2016-06-29T18:36:55Z

@zpao But then it's only static, though, right? Like, you can't eval props in there?

e.g.

stroke: `${props.color}`
stroke: {props.color}

gaearon · 2016-06-29T19:50:58Z

@kevinSuttle

What you pass is just a string. You can generate the string dynamically—either with template literals or good ol’ concatenation.

<style type="text/css" dangerouslySetInnerHTML={{__html: `
  <![CDATA[
    circle {
      stroke: ${props.color};
      fill:   #cc0000;
    }
  ]]>
`}}/>

should work fine.

aweary · 2016-06-29T20:04:53Z

Here's a JSFiddle with a working example: https://jsfiddle.net/yp0q6okn/

saulwolfdev · 2019-09-23T21:44:38Z

A mi me funciono reemplazando xmlns:xlink por xlinkHref y elimine un atributo mas xml:space="preserve" con eso me ando perfecto la referencia lo tome de un pagina

https://itnext.io/using-react-for-xml-svg-470792625278

PachVerb · 2022-05-02T19:47:56Z

@dujuanxian's workaround helped me get through this, provided double (not single) braces are used, of course:
var svgString = '<svg /* React-unfriendly code here... */ </svg>';
<div dangerouslySetInnerHTML={{ __html: svgString }} />

it's work for me

syranide added Type: Bug SVG labels Sep 29, 2014

balanceiskey mentioned this issue Feb 19, 2015

dangerouslySetInnerHTML doesn't update on SVG <g> #2863

Closed

GetContented mentioned this issue Aug 10, 2015

Embedding images in svg doesn't work. reagent-project/reagent#173

Closed

sophiebits closed this as completed Sep 1, 2015

richard-uk1 mentioned this issue Sep 18, 2015

xmlns:xlink (and other SVG namespaced attrs) not supported #4908

Closed

trueadm mentioned this issue Dec 22, 2015

Babel plugin / Inferno fails with rendering SVG infernojs/inferno#31

Closed

mrbinky3000 mentioned this issue Jul 7, 2016

Unknown prop xmlns on <svg> tag with React 15.2.0 jhamlet/svg-react-loader#25

Closed

TroyAlford mentioned this issue May 27, 2020

SVG issues TroyAlford/react-jsx-parser#126

Closed

This was referenced Jun 21, 2021

[Snyk] Security upgrade web-ext from 5.5.0 to 6.2.0 ryan-ally/react-1#64

Open

[Snyk] Security upgrade web-ext from 4.3.0 to 6.2.0 andygongea/react#62

Open

[Snyk] Security upgrade web-ext from 4.3.0 to 6.2.0 nchathu2014/react#14

Open

lubieowoce mentioned this issue Nov 15, 2021

Bug: SVG component fails to render when containing CDATA #22518

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Better SVG Support for namespaced attributes #2250

Better SVG Support for namespaced attributes #2250

ledbruno commented Sep 26, 2014

ledbruno commented Sep 28, 2014

edmspjp commented Sep 28, 2014

bobby commented Apr 10, 2015

dujuanxian commented May 25, 2015

lennerd commented Jul 5, 2015

willhackett commented Jul 27, 2015

lennerd commented Jul 27, 2015

ghost commented Jul 29, 2015

ghost commented Jul 29, 2015

lennerd commented Jul 29, 2015

Nukesor commented Sep 1, 2015

edmspjp commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

sophiebits commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

sophiebits commented Sep 1, 2015

mijamo commented Dec 2, 2015

greypants commented Dec 10, 2015

BryceHayden commented May 17, 2016 •

edited

Loading

zpao commented May 17, 2016

BryceHayden commented May 17, 2016

kevinSuttle commented Jun 28, 2016

zpao commented Jun 29, 2016

kevinSuttle commented Jun 29, 2016

gaearon commented Jun 29, 2016

aweary commented Jun 29, 2016

saulwolfdev commented Sep 23, 2019

PachVerb commented May 2, 2022

Better SVG Support for namespaced attributes #2250

Better SVG Support for namespaced attributes #2250

Comments

ledbruno commented Sep 26, 2014

ledbruno commented Sep 28, 2014

edmspjp commented Sep 28, 2014

bobby commented Apr 10, 2015

dujuanxian commented May 25, 2015

lennerd commented Jul 5, 2015

willhackett commented Jul 27, 2015

lennerd commented Jul 27, 2015

ghost commented Jul 29, 2015

ghost commented Jul 29, 2015

lennerd commented Jul 29, 2015

Nukesor commented Sep 1, 2015

edmspjp commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

sophiebits commented Sep 1, 2015

edvinerikson commented Sep 1, 2015

lennerd commented Sep 1, 2015

sophiebits commented Sep 1, 2015

mijamo commented Dec 2, 2015

greypants commented Dec 10, 2015

BryceHayden commented May 17, 2016 • edited Loading

zpao commented May 17, 2016

BryceHayden commented May 17, 2016

kevinSuttle commented Jun 28, 2016

zpao commented Jun 29, 2016

kevinSuttle commented Jun 29, 2016

gaearon commented Jun 29, 2016

aweary commented Jun 29, 2016

saulwolfdev commented Sep 23, 2019

PachVerb commented May 2, 2022

BryceHayden commented May 17, 2016 •

edited

Loading