svgの色を反転させたい

Question

前提・実現したいこと

以下のサイトでweb開発の勉強をしています。
これに利用されているロゴがsvgなのですが、一つしかなく色を反転させたいと思っています。
しかし、svgのコードをベタ貼りしてcssを適応しても枠と背景しか変わってくれません。
どのようにすれば色を反転させることができるでしょうか。
わかる方がいましたらコメントお願いします。

####参考
devChallenges

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

色が反転しない

該当のソースコード

import React, { VFC } from 'react'
import './InvertLogoImage.css'

const InvertLogoImage: VFC = () => {
  return (
    <div className="logo">
      <svg
        width="128"
        height="43"
        viewBox="0 0 128 43"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.9375 ..省略 3 14.6517Z"
          fill="#291507"
        />
      </svg>
    </div>
  )
}

export default InvertLogoImage

.logo {
  fill: white;
  stroke: blue;
  background-color: black;
}

Comments

[Jon_do]

色の反転との事ですが、元々のロゴを表示した状態から何らかの動作(ホバーやクリックなど)を行った時に色を反転させたいのでしょうか？

[aiai8976]

いえ、静的svg画像を作りたいだけです.

[Jon_do]

目指している物としては猫と文字の枠と内側の色を同じく青にしたいと言う事で間違いないでしょうか？

[aiai8976]

猫と文字を白に、それ以外を黒にしたいです。

Answer 1

svgをテキストエディタで開いてfill="#291507" を全て fill="white" に置換すると出来ます。