objectのdata属性で読み込んだsvgにCSSやJSをあてる

objectのdata属性で読み込んだsvgの中にあるaタグに対してJSやCSSをあてたい。

qiita.com

別documentになるので、普通にJSやCSSはあたらない。上記Qiitaにあるようにobjectをとってきてその.contentDocumentをとり、そこに対してJSを当てる必要がある。

const objectImage = document.querySelector<HTMLObjectElement>('.p-object')?.contentDocument;
const anchors = objectImage?.querySelectorAll('a');

みたいな。

現状CSSも普通にCSS書いたらあたらないので、JSでcontentDocumentでとってきたものに.style.setPropertyとかする以外あるのかわかっていない。

anchors?.forEach((anchor) => {
  anchor.style.setProperty('-webkit-tap-highlight-color', 'transparent');
})

（ちなみにこの-webkit-tap-highlight-colorをtransparentにするのはaタグをdevtoolでスマホ表示にして押下とかすると青くハイライトされたりするのを避けるため。どちらでも良いのだけどね。）