SVG文件内的SVG悬停样式-用于IMG标签

时间:2019-03-06 10:43:54

标签: html css svg

对于悬停颜色更改,我想将此样式封装到SVG文件本身中-因为它们紧密耦合。我尝试了例如:

    <svg version='1.1' viewBox='0 0 58.1 19.2' xmlns='http://www.w3.org/2000/svg'><path id='myid' d='m3 0c-1.7 0-3 1.3-3 3v13.199c0 1.6 1.3 3 3 3h52.1c1.7 0 3-1.4 3-3v-13.199c0-1.7-1.4-3-3-3h-52.1zm11 4.3008c0.8 0 1.5 0.29883 2 0.79883 0.6-0.1 1.1992-0.29961 1.6992-0.59961-0.2 0.6-0.59922 1.1-1.1992 1.5 0.5-0.1 1-0.3 1.5-0.5-0.4 0.5-0.80078 1.0004-1.3008 1.4004v0.29883c0 3.5-2.6996 7.6016-7.5996 7.6016-1.5 0-2.8996-0.40117-4.0996-1.2012h0.59961c1.3 0 2.4008-0.39961 3.3008-1.0996-1.2 0-2.2-0.80039-2.5-1.9004h0.5c0.2 0 0.49922 3.91e-4 0.69922-0.099609-1.2-0.1-2.0996-1.2-2.0996-2.5 0.4 0.2 0.79922 0.30078 1.1992 0.30078-0.7-0.5-1.1992-1.3012-1.1992-2.2012 0-0.5 0.10039-0.99883 0.40039-1.2988 1.3 1.6 3.3 2.6988 5.5 2.7988 0-0.2-0.09961-0.39961-0.09961-0.59961 0-1.5 1.1992-2.6992 2.6992-2.6992zm7.5996 0.89844h6.5996v1.5h-2.3984v6.9004h-0.10156-1.5996v-6.9004h-2.5v-1.5zm28.301 0.90039v1.5996h1.5v1.3008h-1.5v2.3008c0 0.4-3.91e-4 0.69844 0.099609 0.89844s0.2 0.30078 0.5 0.30078h0.40039c0.1 0 0.20039-0.099609 0.40039-0.099609l0.29883 1.1992c-0.2-0.1-0.49883-3.9e-4 -0.79883 0.09961s-0.60039 0.10156-0.90039 0.10156c-0.6 0-1.0012-0.10039-1.2012-0.40039-0.3-0.3-0.39844-0.80039-0.39844-1.4004v-3h-0.80078v-1.4004h0.80078v-1.0996l1.5996-0.40039zm-11.301 1.3008c0.3 0 0.60039-3.906e-4 0.90039 0.099609s0.50078 0.3 0.80078 0.5c0.2 0.2 0.4 0.39922 0.5 0.69922 0.1 0.4 0.19922 0.70117 0.19922 1.2012v0.5c0 0.2-0.099609 0.39961-0.099609 0.59961h-3.5996c0 0.5 0.19844 0.89961 0.39844 1.0996 0.2 0.3 0.60156 0.40039 1.1016 0.40039 0.3 0 0.59844 7.81e-4 0.89844-0.19922 0.3-0.1 0.50156-0.20078 0.60156-0.30078l0.5 1c-0.2 0.2-0.6 0.4-1 0.5s-0.80078 0.19922-1.3008 0.19922c-1 0-1.6996-0.29883-2.0996-0.79883-0.4-0.6-0.70117-1.3008-0.70117-2.3008 0-1.1 0.30078-1.8004 0.80078-2.4004s1.1996-0.79883 2.0996-0.79883zm6 0c0.3 0 0.60039-3.906e-4 0.90039 0.099609s0.50078 0.20039 0.80078 0.40039c0.2 0.2 0.4 0.39922 0.5 0.69922 0.2 0.5 0.19922 0.80078 0.19922 1.3008v0.5c0 0.2-0.099609 0.39961-0.099609 0.59961h-3.5996c0 0.5 0.19844 0.89961 0.39844 1.0996 0.2 0.3 0.60156 0.40039 1.1016 0.40039 0.3 0 0.59844 7.81e-4 0.89844-0.19922 0.3-0.1 0.50156-0.20078 0.60156-0.30078l0.5 1c-0.2 0.2-0.6 0.4-1 0.5s-0.80078 0.19922-1.3008 0.19922c-1 0-1.6996-0.29883-2.0996-0.79883-0.4-0.6-0.70117-1.3008-0.70117-2.3008 0-1.1 0.30078-1.8004 0.80078-2.4004s1.1996-0.79883 2.0996-0.79883zm-17.9 0.19922h1.7012l0.90039 3 0.09961 1.0996h0.099609l0.19922-1.0996 1-3h1.2012l1.0996 3.0996 0.19922 1 0.20117-1 0.79883-3.0996h1.4004l-1.9004 6.0996h-1.1992l-1.1992-3.3984-0.20117-0.80078h-0.099609v0.90039l-1.1992 3.2988h-1.2012l-1.9004-6.0996zm11.9 1.0996c-0.4 0-0.70039 0.10039-0.90039 0.40039-0.2 0.2-0.29844 0.6-0.39844 1h2.1992c0-0.4 7.81e-4 -0.8-0.19922-1s-0.40117-0.40039-0.70117-0.40039zm6 0c-0.4 0-0.70039 0.10039-0.90039 0.40039-0.2 0.2-0.29844 0.6-0.39844 1h2.1992c0-0.4 7.81e-4 -0.8-0.19922-1s-0.30117-0.40039-0.70117-0.40039z' fill='#1b95e0'/>
        <style>
            #myid:hover {
                fill: green;
            }
        </style>
    </svg>

当单独打开此SVG文件时,我看到悬停颜色发生了变化,但是如果在img标签上使用:(

0 个答案:

没有答案