我有一个svg图标，我想在悬停时用一种以上的颜色为其着色。 在此示例中，我想使加号轮廓在悬停时仅显示红色，而图标的其余部分保持黑色。
这里是例子：
.svg_icons{
fill:lightgrey;
transition:0.3s;
cursor:pointer;
}
.svg_icons:hover{
fill:#000;
}<svg class='svg_icons' height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m219.977 15h29.743c1.687 0 3.339.203 4.945.562v96.474c0 19.08 15.496 34.603 34.542 34.603h96.263c.354 1.595.553 3.235.553 4.908v50.453c0 4.142 3.358 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-50.453c0-10.001-3.891-19.408-10.955-26.488l-113.804-114.047c-7.086-7.101-16.513-11.012-26.545-11.012h-29.743c-4.142 0-7.5 3.358-7.5 7.5s3.359 7.5 7.501 7.5zm155.467 116.639h-86.237c-10.775 0-19.542-8.793-19.542-19.603v-86.401z"/><path d="m38.523 112.5c4.142 0 7.5-3.358 7.5-7.5v-57.5c0-17.92 14.58-32.5 32.5-32.5h106.454c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-106.454c-26.191 0-47.5 21.309-47.5 47.5v57.5c0 4.142 3.358 7.5 7.5 7.5z"/><path d="m95.93 157.5h123.701c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-123.701c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5z"/><path d="m95.93 322.5c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h123.701c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m317.93 202.5h-224c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h224c4.142 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"/><path d="m325.43 270c0-4.143-3.358-7.5-7.5-7.5h-224c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h224c4.143 0 7.5-3.357 7.5-7.5z"/><path d="m401.023 297.936v-60.936c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v57.903c-4.6-.594-9.288-.903-14.046-.903-14.311 0-28.225 2.732-41.355 8.121-3.832 1.572-5.664 5.954-4.091 9.786 1.573 3.831 5.952 5.664 9.786 4.091 11.315-4.644 23.313-6.998 35.661-6.998 6.867 0 13.561.747 20.013 2.152.012.002.023.005.035.008 42.231 9.211 73.952 46.888 73.952 91.841 0 51.832-42.168 94-94 94s-94-42.168-94-94c0-26.496 11.272-51.901 30.927-69.699 3.07-2.78 3.306-7.523.525-10.594-2.78-3.069-7.522-3.306-10.594-.525-22.789 20.637-35.859 50.094-35.859 80.818 0 16.037 3.483 31.275 9.73 45h-194.184c-17.92 0-32.5-14.579-32.5-32.5v-275.501c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v275.5c0 26.191 21.309 47.5 47.5 47.5h202.501c19.526 29.501 53.003 49 90.952 49 60.103 0 109-48.897 109-109 .001-50.047-33.906-92.318-79.953-105.064z"/><path d="m371.977 340c-12.407 0-22.5 10.094-22.5 22.5v18h-18c-12.407 0-22.5 10.094-22.5 22.5s10.093 22.5 22.5 22.5h18v18c0 12.406 10.093 22.5 22.5 22.5s22.5-10.094 22.5-22.5v-18h18c12.407 0 22.5-10.094 22.5-22.5s-10.093-22.5-22.5-22.5h-18v-18c0-12.406-10.093-22.5-22.5-22.5zm40.5 55.5c4.136 0 7.5 3.364 7.5 7.5s-3.364 7.5-7.5 7.5h-25.5c-4.142 0-7.5 3.357-7.5 7.5v25.5c0 4.136-3.364 7.5-7.5 7.5s-7.5-3.364-7.5-7.5v-25.5c0-4.143-3.358-7.5-7.5-7.5h-25.5c-4.136 0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5h25.5c4.142 0 7.5-3.357 7.5-7.5v-25.5c0-4.136 3.364-7.5 7.5-7.5s7.5 3.364 7.5 7.5v25.5c0 4.143 3.358 7.5 7.5 7.5z"/></g></svg>
答案 0 :(得分：1)
您可以将类添加到svg中的路径，以便可以将其填充在悬停中。
这是代码
.svg_icons{
fill:lightgrey;
transition:0.3s;
cursor:pointer;
}
.svg_icons:hover{
fill:#000;
}
.svg_icons:hover .svg_color2{
fill:red;
}<svg class='svg_icons' height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m219.977 15h29.743c1.687 0 3.339.203 4.945.562v96.474c0 19.08 15.496 34.603 34.542 34.603h96.263c.354 1.595.553 3.235.553 4.908v50.453c0 4.142 3.358 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-50.453c0-10.001-3.891-19.408-10.955-26.488l-113.804-114.047c-7.086-7.101-16.513-11.012-26.545-11.012h-29.743c-4.142 0-7.5 3.358-7.5 7.5s3.359 7.5 7.501 7.5zm155.467 116.639h-86.237c-10.775 0-19.542-8.793-19.542-19.603v-86.401z"/><path d="m38.523 112.5c4.142 0 7.5-3.358 7.5-7.5v-57.5c0-17.92 14.58-32.5 32.5-32.5h106.454c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-106.454c-26.191 0-47.5 21.309-47.5 47.5v57.5c0 4.142 3.358 7.5 7.5 7.5z"/><path d="m95.93 157.5h123.701c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5h-123.701c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5z"/><path d="m95.93 322.5c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h123.701c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m317.93 202.5h-224c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5h224c4.142 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"/><path d="m325.43 270c0-4.143-3.358-7.5-7.5-7.5h-224c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h224c4.143 0 7.5-3.357 7.5-7.5z"/><path d="m401.023 297.936v-60.936c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v57.903c-4.6-.594-9.288-.903-14.046-.903-14.311 0-28.225 2.732-41.355 8.121-3.832 1.572-5.664 5.954-4.091 9.786 1.573 3.831 5.952 5.664 9.786 4.091 11.315-4.644 23.313-6.998 35.661-6.998 6.867 0 13.561.747 20.013 2.152.012.002.023.005.035.008 42.231 9.211 73.952 46.888 73.952 91.841 0 51.832-42.168 94-94 94s-94-42.168-94-94c0-26.496 11.272-51.901 30.927-69.699 3.07-2.78 3.306-7.523.525-10.594-2.78-3.069-7.522-3.306-10.594-.525-22.789 20.637-35.859 50.094-35.859 80.818 0 16.037 3.483 31.275 9.73 45h-194.184c-17.92 0-32.5-14.579-32.5-32.5v-275.501c0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v275.5c0 26.191 21.309 47.5 47.5 47.5h202.501c19.526 29.501 53.003 49 90.952 49 60.103 0 109-48.897 109-109 .001-50.047-33.906-92.318-79.953-105.064z"/><path class='svg_color2' d="m371.977 340c-12.407 0-22.5 10.094-22.5 22.5v18h-18c-12.407 0-22.5 10.094-22.5 22.5s10.093 22.5 22.5 22.5h18v18c0 12.406 10.093 22.5 22.5 22.5s22.5-10.094 22.5-22.5v-18h18c12.407 0 22.5-10.094 22.5-22.5s-10.093-22.5-22.5-22.5h-18v-18c0-12.406-10.093-22.5-22.5-22.5zm40.5 55.5c4.136 0 7.5 3.364 7.5 7.5s-3.364 7.5-7.5 7.5h-25.5c-4.142 0-7.5 3.357-7.5 7.5v25.5c0 4.136-3.364 7.5-7.5 7.5s-7.5-3.364-7.5-7.5v-25.5c0-4.143-3.358-7.5-7.5-7.5h-25.5c-4.136 0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5h25.5c4.142 0 7.5-3.357 7.5-7.5v-25.5c0-4.136 3.364-7.5 7.5-7.5s7.5 3.364 7.5 7.5v25.5c0 4.143 3.358 7.5 7.5 7.5z"/></g></svg>