html - SVG在firefox中不起作用，在chrome中起作用

为什么此示例在Chrome中不能运行，但在Firefox中不起作用？

a{
		position: absolute;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
		display: block;
		width: 200px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: white;
		text-decoration: none;
		font-size: 2em;
		letter-spacing: 4px;
	}
		a svg, a svg rect{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			fill: transparent;
		}
		a svg rect{
			stroke: red;
			stroke-width:10;
			stroke-dasharray: 60 200;
			stroke-dashoffset: 320;
			transition: 2s;
		}
		a:hover svg rect{
			stroke-dasharray: 200 60;
			stroke-dashoffset:0;
			transition: 10s;
		}

<body bgcolor="black">
	<a href="#"><svg><rect></rect></svg> click here</a>  
</body>

我正在与svg悬停效果建立链接，但是svg在Firefox中不起作用。在chrome中工作正常谢谢你的帮助！

SVG在firefox中不起作用，在chrome中起作用

0 个答案: