reactでobjectタグ内のsvgの色変更など加工をしたい

前提

react、typescriptでwebアプリを作成しています

実現したいこと

色選択ボタンをクリックすると埋め込んであるsvg画像の線や塗りの色を変更することで、ユーザーが目的のカラーパターンの画像を見れるようにしたいと考えています

発生している問題・エラーメッセージ

objectタグのdata属性からsvgを読み込んでいるためレンダリングされたソースコードでは

<object data="" class="">
 #document
  <svg xmlns:dc=""hogehoge />

onClickイベントにconsole.log(document.getElementsByTagName('object'))をしたところobjectタグまでは取ってこれるのですが、svg以降の階層が取得できません
objectで読み込んだsvg内の特定のIDやClassを参照し、pathタグのfillやstrokeの色変更をするにはどのようにしたらよろしいのでしょうか？

試したこと

console.log(document.getElementsByTagName('svg'))で取得できないか確認→取得できなかった
styled-commponentを使用しており、css内でsvgに何らかの書き換えができないか確認→svgにcssを適用できなかったので、object内のsvgにstyled-componentからcssの変更はできない？

const SObject = styled.object`
width: 100%;
  svg {
    width: 50%;
  }
`

行動規範の内容に同意します

回答1件

ベストアンサー

<object> があるHTMLページと参照しているSVGが同一オリジンであるときだけ、object.getSVGDocument() で SVG の Document ノードを取得できます。document.querySelector('object').getSVGDocument().documentElement などで <svg> にアクセスできるでしょう。

オリジンが異なる場合は不可能です。