reactjstypescriptsvgxlink

How to use xlinkHref on svg tag <a> using Typescript and React

I am trying to make my SVG focusable, by implementing this simple and elegant solution.

I am using Typescript and React, here is my code:

return (
  <g {...propsWbsComponent} >
    <a xlinkHref={"#"}>
      <rect  {...propsWbsComponentBox} />
    </a>

    <text {...propsWbsId} >
      {props.wbsComponentId}
    </text>
  </g>
}

I am getting the error message:

error TS2339: Property 'xlinkHref' does not exist on type 'HTMLProps'

I am not sure where to look, if it's a Typescript issue, React missing svg attributes (although xlinkHref is now part of React) or something else.

Thanks for your help!

Solution

  • SVG can do this natively if you set a tabindex attribute. This works the same as the HTML attribute of the same name.