javascript - 在使用图像标签加载的悬停时更改 SVG 颜色的一部分

Question

我有一个 SVG 图像，它有一个背景圆圈和一个箭头，我在我的应用程序中使用它，如下所示：

<def>
    //few other svgs with image tag will be loaded here
    <image id="svg_asset" x="0" y="0" width="160" height="160" 
         xlink:href="public/assets/svgassets/next_page.svg" />
</def>

和我的 svg 内容：

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><style>.a{fill:#4772c0;}.b,.d{fill:#fff;}.c,.d{stroke:none;}</style></defs><g transform="translate(-1043 -166)"><circle class="a" cx="30" cy="30" r="30" transform="translate(1043 166)"/><g class="b" transform="translate(1052.198 169.665)"><path class="c" d="M 23.94279861450195 36.81674957275391 C 23.52678871154785 36.81674957275391 23.12740898132324 36.64649200439453 22.8182487487793 36.33732986450195 C 22.17817878723145 35.69723129272461 22.17817878723145 34.69441986083984 22.8182487487793 34.05432891845703 L 28.51812171936035 28.35429000854492 L 9.353948593139648 28.35429000854492 C 8.469528198242188 28.35429000854492 7.749998092651367 27.63474082946777 7.749998092651367 26.75028991699219 C 7.749998092651367 25.8658504486084 8.469528198242188 25.14630126953125 9.353948593139648 25.14630126953125 L 28.51812171936035 25.14630126953125 L 22.78439903259277 19.41240119934082 C 22.14432907104492 18.77231025695801 22.14432907104492 17.76951026916504 22.78439903259277 17.12942123413086 C 23.09354782104492 16.82024955749512 23.49892807006836 16.64999008178711 23.92586898803711 16.64999008178711 C 24.35280799865723 16.64999008178711 24.75818824768066 16.82024955749512 25.06733894348145 17.12942123413086 L 33.49604797363281 25.59222984313965 C 33.80729675292969 25.90348052978516 33.98195648193359 26.33366012573242 33.97489929199219 26.7721004486084 C 33.96802139282227 27.19858551025391 33.79694747924805 27.59096908569336 33.49312210083008 27.8774471282959 L 25.06768798828125 36.33697128295898 C 24.75818824768066 36.64649200439453 24.35881805419922 36.81674957275391 23.94279861450195 36.81674957275391 Z"/><path class="d" d="M 23.94279861450195 36.56674957275391 C 24.28127861022949 36.56674957275391 24.6197681427002 36.43135070800781 24.89055824279785 36.16054916381836 L 33.31892013549805 27.69808959960938 C 33.86049652099609 27.19034004211426 33.86049652099609 26.31023979187012 33.31892013549805 25.76865005493164 L 24.89055824279785 17.30619049072266 C 24.6197681427002 17.03539085388184 24.27281761169434 16.89999008178711 23.92586898803711 16.89999008178711 C 23.57891845703125 16.89999008178711 23.23196792602539 17.03539085388184 22.96117782592773 17.30619049072266 C 22.41959762573242 17.8477897644043 22.41959762573242 18.69403076171875 22.96117782592773 19.23563003540039 L 29.12165832519531 25.39630126953125 L 9.353948593139648 25.39630126953125 C 8.609278678894043 25.39630126953125 7.999998092651367 26.00559997558594 7.999998092651367 26.75028991699219 C 7.999998092651367 27.49499130249023 8.609278678894043 28.10429000854492 9.353948593139648 28.10429000854492 L 29.12165832519531 28.10429000854492 L 22.99502754211426 34.23110961914063 C 22.45344734191895 34.77270126342773 22.45344734191895 35.61894989013672 22.99502754211426 36.16054916381836 C 23.26581764221191 36.43133926391602 23.60430908203125 36.56674957275391 23.94279861450195 36.56674957275391 M 23.94279861450195 37.06674957275391 C 23.46000862121582 37.06674957275391 22.99785804748535 36.87047958374023 22.64147758483887 36.51409912109375 C 21.90227890014648 35.77487182617188 21.90227890014648 34.61677169799805 22.6414680480957 33.87755966186523 L 27.91457557678223 28.60429000854492 L 9.353948593139648 28.60429000854492 C 8.33167839050293 28.60429000854492 7.499998092651367 27.77259063720703 7.499998092651367 26.75028991699219 C 7.499998092651367 25.72800064086914 8.33167839050293 24.89630126953125 9.353948593139648 24.89630126953125 L 27.91457366943359 24.89630126953125 L 22.60761833190918 19.58917999267578 C 21.86842918395996 18.84996032714844 21.86842918395996 17.69186019897461 22.60761833190918 16.95264053344727 C 22.96398735046387 16.59626007080078 23.43214797973633 16.39999008178711 23.92586898803711 16.39999008178711 C 24.41958808898926 16.39999008178711 24.88774871826172 16.59626007080078 25.24411773681641 16.95264053344727 L 33.67318725585938 25.41580963134766 C 34.03167724609375 25.77431106567383 34.23301696777344 26.2703800201416 34.22485733032227 26.77613067626953 C 34.21691131591797 27.26923942565918 34.01913833618164 27.72353172302246 33.66771697998047 28.05642318725586 L 25.24482917785645 36.51338958740234 C 24.88774871826172 36.87047958374023 24.42559814453125 37.06674957275391 23.94279861450195 37.06674957275391 Z"/></g></g></svg>

我的要求是在悬停时将背景蓝色圆圈颜色更改为洋红色，并且不应更改箭头颜色。我尝试通过以下方式使用过滤器：

1）在css中过滤

#svg_asset:hover{
    filter:  invert(18%) sepia(99%) saturate(3021%) hue-rotate(303deg) brightness(77%) contrast(107%);
}

2. 使用颜色矩阵过滤

#svg_asset:hover{
    filter: url(#colorFilter);
}

<filter id="colorFilter">
    <feColorMatrix color-interpolation filters="sRGB"
          type="matrix"
          values="0.73 0   0   0   0
                  0   0.04  0   0   0
                  0   0   0.53  0   0
                  0   0   0   1   0 "
         />
</filter>

但是这些方法会更改整个 svg 颜色，而不是仅将蓝色圆圈更改为其他颜色。提前感谢您的回答。

标签： javascripthtmlcsssvgsvg-filters