CODEWITHSUNDEEP
reactjstypescriptsvgxlink
Greg Forel
Greg Forel

Reputation: 2569

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!

Upvotes: 2

Views: 5195

Answers (2)

Robert Longson
Robert Longson

Reputation: 124059

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

Upvotes: 1

Henrik Andersson
Henrik Andersson

Reputation: 47172

You're trying to set xlinkHref on an a tag, which is not supported. The xlinkHref property should be used on a <use> tag instead.

You can read up on the allowed defs here:

https://github.com/Microsoft/TypeScript/issues/14893

SVG use tag and ReactJS

Upvotes: 1

Related Questions