SVG 悬停在 Firefox 中不起作用
Posted
技术标签:
【中文标题】SVG 悬停在 Firefox 中不起作用【英文标题】:SVG hover won't work in Firefox 【发布时间】:2018-12-18 22:50:41 【问题描述】:我有一个相当大的 SVG,当将鼠标悬停在上面时,特定的路径会发生变化。这适用于 Chrome,但不适用于 Firefox。 每个要动画的部分都嵌套在一个链接标签中,悬停效果是让它看起来像是在扩展部分。感谢任何有关为什么这在 Firefox 中不起作用的帮助。也不是通过调试器看起来 Firefox 识别悬停事件但忽略新路径。
#matrice1:hover #sec1
d: path("M480.03,200.899l68.21-175.566C509.431,10.447,450.037,0,405.989,0 l-0.106,187.383C431.991,187.383,456.979,192.173,480.03,200.899");
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 808 798" enable-background="new 0 0 800 798">
<a href="#" class="matrixSection matrixNav" onclick="animateMatrix(1)" id="matrice1">
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="M480.03,200.899l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066
v139.656C431.991,187.383,456.979,192.173,480.03,200.899"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-miterlimit="10" d="M480.03,200.899
l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066v139.656C431.991,187.383,456.979,192.173,480.03,200.899z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M475.407,212.728l4.623-11.829c-23.051-8.727-48.039-13.517-74.147-13.517
v12.695C430.36,200.078,453.789,204.56,475.407,212.728"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M475.407,212.728l4.623-11.829
c-23.051-8.727-48.039-13.517-74.147-13.517v12.695C430.36,200.078,453.789,204.56,475.407,212.728z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M450.935,275.354l24.473-62.626c-21.618-8.166-45.047-12.649-69.524-12.649
v67.277C421.72,267.354,436.894,270.184,450.935,275.354"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M450.935,275.354l24.473-62.626
c-21.618-8.166-45.047-12.649-69.524-12.649v67.277C421.72,267.354,436.894,270.184,450.935,275.354z"/>
<path clip-path="url(#SVGID_4_)" fill="#E7223B" d="M447.761,283.476l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723
C420.599,276.078,434.704,278.69,447.761,283.476"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-miterlimit="10" d="M447.761,283.476
l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723C420.599,276.078,434.704,278.69,447.761,283.476z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="456.941,77.504 456.98,77.504 456.98,99.654 461.847,99.654
461.847,70.718 457.963,70.718 453.481,75.967 453.481,81.045 453.524,81.045 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="436.893,124.923 436.893,130.997 435.522,130.997 435.522,121.33
437.118,121.33 438.872,126.875 438.872,121.33 440.227,121.33 440.227,130.997 438.801,130.997 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.151,128.501v-4.675c0-1.512,0.741-2.61,2.45-2.61
c1.728,0,2.468,1.098,2.468,2.61v4.675c0,1.498-0.74,2.611-2.468,2.611C441.893,131.112,441.151,130,441.151,128.501
M444.445,128.759v-5.189c0-0.583-0.259-0.998-0.844-0.998c-0.568,0-0.824,0.415-0.824,0.998v5.189
c0,0.585,0.256,0.997,0.824,0.997C444.187,129.756,444.445,129.344,444.445,128.759"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M435.522,134.873h2.409c1.64,0,2.238,0.813,2.238,2.167v2.038
c0,1.354-0.599,2.181-2.238,2.181h-0.785v3.28h-1.624V134.873z M437.146,136.198v3.807h0.602c0.555,0,0.795-0.271,0.795-0.799
v-2.224c0-0.527-0.24-0.784-0.795-0.784H437.146z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.01,142.043v-4.675c0-1.512,0.741-2.609,2.451-2.609
c1.726,0,2.467,1.098,2.467,2.609v4.675c0,1.499-0.741,2.608-2.467,2.608C441.751,144.651,441.01,143.542,441.01,142.043
M444.304,142.301v-5.19c0-0.585-0.259-0.998-0.843-0.998c-0.569,0-0.826,0.413-0.826,0.998v5.19c0,0.585,0.257,0.997,0.826,0.997
C444.045,143.298,444.304,142.886,444.304,142.301"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="451.772,134.872 449.933,144.538 448.165,144.538 446.324,134.872
447.98,134.872 449.091,141.617 449.104,141.617 450.246,134.872 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="452.44,134.872 456.319,134.872 456.319,136.197 454.067,136.197
454.067,138.964 455.678,138.964 455.678,140.274 454.067,140.274 454.067,143.213 456.319,143.213 456.319,144.538
452.44,144.538 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.813,140.105v4.434h-1.627v-9.667h2.369c1.638,0,2.237,0.813,2.237,2.167
v1.239c0,1.042-0.372,1.655-1.299,1.869l1.555,4.392h-1.711L458.813,140.105z M458.813,136.198v3.008h0.542
c0.555,0,0.798-0.285,0.798-0.798v-1.426c0-0.527-0.243-0.784-0.798-0.784H458.813z"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="462.347,134.872 466.669,134.872 466.669,136.197 465.327,136.197
465.327,144.538 463.688,144.538 463.688,136.197 462.347,136.197 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="470.586,140.86 470.586,144.538 468.963,144.538 468.963,140.86
467.151,134.872 468.85,134.872 469.832,138.535 469.844,138.535 470.83,134.872 472.383,134.872 "/>
</a>
</svg>
【问题讨论】:
【参考方案1】:使用 CSS 为 d
属性设置样式是 Chrome 已实现的新 SVG2 功能,但 Firefox 尚未实现。
更新
您可以使用 SVG 内置的 SMIL 动画功能实现相同的效果。这适用于大多数浏览器——除了 IE 和 Edge。如果您还需要支持这些浏览器,则需要使用 javascript(在鼠标事件处理程序中)切换路径。
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="...initial path...">
<set attributeName="d" to="...new path..."
begin="matrice1.mouseover" end="matrice1.mouseout"/>
</path>
演示:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 808 798" enable-background="new 0 0 800 798">
<a href="#" class="matrixSection matrixNav" onclick="animateMatrix(1)" id="matrice1">
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="M480.03,200.899l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066
v139.656C431.991,187.383,456.979,192.173,480.03,200.899">
<set attributeName="d" to="M480.03,200.899l68.21-175.566C509.431,10.447,450.037,0,405.989,0 l-0.106,187.383C431.991,187.383,456.979,192.173,480.03,200.899"
begin="matrice1.mouseover" end="matrice1.mouseout"/>
</path>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-miterlimit="10" d="M480.03,200.899
l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066v139.656C431.991,187.383,456.979,192.173,480.03,200.899z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M475.407,212.728l4.623-11.829c-23.051-8.727-48.039-13.517-74.147-13.517
v12.695C430.36,200.078,453.789,204.56,475.407,212.728"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M475.407,212.728l4.623-11.829
c-23.051-8.727-48.039-13.517-74.147-13.517v12.695C430.36,200.078,453.789,204.56,475.407,212.728z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M450.935,275.354l24.473-62.626c-21.618-8.166-45.047-12.649-69.524-12.649
v67.277C421.72,267.354,436.894,270.184,450.935,275.354"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M450.935,275.354l24.473-62.626
c-21.618-8.166-45.047-12.649-69.524-12.649v67.277C421.72,267.354,436.894,270.184,450.935,275.354z"/>
<path clip-path="url(#SVGID_4_)" fill="#E7223B" d="M447.761,283.476l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723
C420.599,276.078,434.704,278.69,447.761,283.476"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-miterlimit="10" d="M447.761,283.476
l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723C420.599,276.078,434.704,278.69,447.761,283.476z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke- stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="456.941,77.504 456.98,77.504 456.98,99.654 461.847,99.654
461.847,70.718 457.963,70.718 453.481,75.967 453.481,81.045 453.524,81.045 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="436.893,124.923 436.893,130.997 435.522,130.997 435.522,121.33
437.118,121.33 438.872,126.875 438.872,121.33 440.227,121.33 440.227,130.997 438.801,130.997 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.151,128.501v-4.675c0-1.512,0.741-2.61,2.45-2.61
c1.728,0,2.468,1.098,2.468,2.61v4.675c0,1.498-0.74,2.611-2.468,2.611C441.893,131.112,441.151,130,441.151,128.501
M444.445,128.759v-5.189c0-0.583-0.259-0.998-0.844-0.998c-0.568,0-0.824,0.415-0.824,0.998v5.189
c0,0.585,0.256,0.997,0.824,0.997C444.187,129.756,444.445,129.344,444.445,128.759"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M435.522,134.873h2.409c1.64,0,2.238,0.813,2.238,2.167v2.038
c0,1.354-0.599,2.181-2.238,2.181h-0.785v3.28h-1.624V134.873z M437.146,136.198v3.807h0.602c0.555,0,0.795-0.271,0.795-0.799
v-2.224c0-0.527-0.24-0.784-0.795-0.784H437.146z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.01,142.043v-4.675c0-1.512,0.741-2.609,2.451-2.609
c1.726,0,2.467,1.098,2.467,2.609v4.675c0,1.499-0.741,2.608-2.467,2.608C441.751,144.651,441.01,143.542,441.01,142.043
M444.304,142.301v-5.19c0-0.585-0.259-0.998-0.843-0.998c-0.569,0-0.826,0.413-0.826,0.998v5.19c0,0.585,0.257,0.997,0.826,0.997
C444.045,143.298,444.304,142.886,444.304,142.301"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="451.772,134.872 449.933,144.538 448.165,144.538 446.324,134.872
447.98,134.872 449.091,141.617 449.104,141.617 450.246,134.872 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="452.44,134.872 456.319,134.872 456.319,136.197 454.067,136.197
454.067,138.964 455.678,138.964 455.678,140.274 454.067,140.274 454.067,143.213 456.319,143.213 456.319,144.538
452.44,144.538 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.813,140.105v4.434h-1.627v-9.667h2.369c1.638,0,2.237,0.813,2.237,2.167
v1.239c0,1.042-0.372,1.655-1.299,1.869l1.555,4.392h-1.711L458.813,140.105z M458.813,136.198v3.008h0.542
c0.555,0,0.798-0.285,0.798-0.798v-1.426c0-0.527-0.243-0.784-0.798-0.784H458.813z"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="462.347,134.872 466.669,134.872 466.669,136.197 465.327,136.197
465.327,144.538 463.688,144.538 463.688,136.197 462.347,136.197 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="470.586,140.86 470.586,144.538 468.963,144.538 468.963,140.86
467.151,134.872 468.85,134.872 469.832,138.535 469.844,138.535 470.83,134.872 472.383,134.872 "/>
</a>
</svg>
【讨论】:
实际上只有 Chrome 实现了它(使用与 SVG 2 规范不同的语法)。 Firefox、Safari 和 Edge 没有。 有没有其他方法可以实现我想要的? 我已经用一种方法的例子更新了我的答案。另一种方法是附加鼠标事件处理程序并使用 Javascript 更新d
属性。以上是关于SVG 悬停在 Firefox 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
使用 xlink 的 SVG 在 Firefox 84 中不起作用
jQuery div 悬停功能在 Firefox 中不起作用
CSS3 过渡/悬停效果在 Firefox 中不起作用; Firefox 错误?