search

jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

Accessing SVG child elements after loading #78

Closed Manuel83 closed 7 years ago

Manuel83 commented 7 years ago

Is it possible access child elements after loading? I like to change the text of the tspan element ("Hello World") dynamically.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="150" height="250" viewBox="0, 0, 150, 250">
  <g id="Ebene_1">
    <path d="M140.816,50.417 C145.888,50.417 150,54.097 150,58.636 L150,242.197 C150,246.737 145.888,250.417 140.816,250.417 L9.184,250.417 C4.112,250.417 0,246.737 0,242.197 L0,58.636 C0,54.097 4.112,50.417 9.184,50.417 L140.816,50.417 z M140.816,52.417 L9.184,52.417 C5.17,52.417 2,55.254 2,58.636 L2,242.197 C2,245.58 5.17,248.417 9.184,248.417 L140.816,248.417 C144.83,248.417 148,245.58 148,242.197 L148,58.636 C148,55.254 144.83,52.417 140.816,52.417 z" fill="#D3D3D3"/>

    <text transform="matrix(1, 0, 0, 1, 37.792, 37.917)">
      <tspan x="-16.854" y="3.5" font-family="HelveticaNeue-Bold" font-size="12" fill="#FFFFFF">Hello World</tspan>
    </text>
  </g>
</svg>
jhamlet commented 7 years ago

This sounds like something you would want to solve with a wrapping react component at runtime, not at build/compile time.

When the wrapping component's componentDidMount method is called you can then introspect the DOM and do any replacements you needed to do.

Manuel83 commented 7 years ago

would be nice if you could support react refs

jhamlet commented 7 years ago

How would that solve this?