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

时间:2018-09-22 06:30:34

标签: html css svg

为什么此示例在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中工作正常 谢谢你的帮助!

0 个答案:

没有答案