Html 在SVG上鼠标悬停以更改颜色
我在HTML中添加了SVG。我想做的是，当鼠标悬停在SVG上时，将其更改为淡黄色，转换为1s HTML中的CSS是：Html 在SVG上鼠标悬停以更改颜色,html,css,svg,Html,Css,Svg,我在HTML中添加了SVG。我想做的是，当鼠标悬停在SVG上时，将其更改为淡黄色，转换为1s HTML中的CSS是： .svg { width: 17px; height: 99px; } HTML格式的内容： <body> <img src="raptor.svg" class="svg" /> </body> 它不能正常工作，因为colorCSS属性无法更改SVG填充颜色 我错过了什么？我必须改用内联SVG吗？如果您将鼠标悬停在SVG路
.svg {
width: 17px;
height: 99px;
}
<body>
<img src="raptor.svg" class="svg" />
</body>
color我错过了什么？我必须改用内联SVG吗？如果您将鼠标悬停在SVG
路径的任何部分上，我可以看到它工作得非常愉快
如果您希望在将鼠标悬停在SVG本身的任何部分（而不仅仅是路径）上时也导致转换，请添加以下CSS：
svg:hover #content path {
fill: #E2C650;
}
下面是一个工作片段：
svg{
宽度：17px；
高度：99px；
}
svg：悬停#内容路径{
填充：#E2C650；
}
#内容路径{
填充：#F00；
过渡：1s；
}
您可以在DOM中使用PlaceSVG，而不是在img标记中使用svg。这应该行得通
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
width: 17px;
height: 99px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
</body>
</html>
文件
svg{
宽度：17px；
高度：99px；
}
#内容路径{
填充：#F00；
过渡：1s；
}
#内容：悬停路径{
填充：#E2C650；
}
你试过用填充
代替颜色吗？你不能用颜色填充。内容不是交互式的。您需要将SVG内联或使用or标记代替标记。@ntgCleanerfill
不是HTML的CSS属性，而是SVG的属性。我试过了，但没用。。。或者您可以使用filter
将任何图像中的所有黑色区域变为红色：img{filter:反转（13%）深褐色（69%）饱和色（5718%）色调旋转（356度）亮度（122%）对比度（122%）；}
从@Raptor开始计算是的，使用CSS旋转的真实文本通常可能是最好的选择，因为现在对转换的支持已经足够了；我猜你甚至不一定需要webfont：只要看看围绕Arial Black/Impact或类似字体构建的系统字体堆栈就可以了。谢谢你的回答。但这只有在将SVG添加到HTML内联时才有效。我试图避免使用内联SVG，因为它会使HTML内容变得凌乱。但我似乎没有选择。@Raptor你可以使用或
svg:hover #content path {
fill: #E2C650;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
width: 17px;
height: 99px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
</body>
</html>