引入css没有效果
来源：3-6 使用CSS
hunmix
2018-03-18 13:43:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>svg</title>
<!-- <style type="text/css">
*{
margin:0;
padding:0;
}
rect:hover{
fill:#ddd;
}
</style> -->
<?xml-stylesheet type="text/css" href="css/style.css"?>
</head>
<body>
<!-- c s q t -->
<svg width='600' height='400' style="background:#0f0;">
<circle cx='100' cy='100' r='50' stroke='#fff' fill="transparent"></circle>
<circle cx='105' cy='105' r='35' stroke='#fff' fill="transparent"></circle>
<ellipse cx='100' cy='100' rx='100' ry='50' stroke='#fff' fill='transparent'></ellipse>
<path d='M 5 5 H 55 L 55 50 z' stroke='#000' fill='transparent'></path>
<path id='test' d='m 50 50 C 50 80,100 80,120 50 S 170 30,170 50' stroke='#fff' fill='transparent'></path>
<path d='m 50 100 Q 75 80,100 100 T 150 100 A 50 100 0 1 1 200 100' stroke='#fff' fill='transparent'></path>
<path d='m 50 250 L 100 250 M 150 250 L 200 250 M 250 250 L 300 250' stroke='#fff' fill='transparent'></path>
<text x='100' y='100' dx='10 10 10' dy='10 10 10' rotate='45 90 135 180'>皮皮虾</text>
<text x='100' y='100' dx='10 10 10' transform='rotate(-10)' textLength='200' lengthAdjust='spacingAndGlyphs'>皮皮虾2</text>
<text><textPath xlink:href='#test'>我是一条扭曲的<tspan fill='#f00'>字字字字字字字字字字字字字字字字字字字字字字</tspan></textPath></text>
<!-- 折线 -->
<polyline points="100 100 200 200 300 100" stroke='#fff' stroke-width='5' fill='transparent' stroke-linecap='round' stroke-linejoin='round'></polyline>
<path d='m 100 100 Q 150 50 200 100 T 300 100' fill='transparent' stroke='#f00' stroke-dasharray='5 5' stroke-linecap='round'></path>
<rect x='200' y='200' width='100' height='50' stroke='#fff' fill='#EE4187'></rect>
</svg>
</body>
</html>rect:hover{
fill:#ddd;
}
*{
margin:0;
padding:0;
}对比了好几遍 没写错呀 为什么没有效果呢
写回答
2回答
-
你好，如下，图一是有css，且鼠标移入时的状态，图二是没有css时的状态。css是可以生效的哦，建议：可使用谷歌浏览器测试下。另：其他问题，会按照时间循序来进行解答哦。
图一：
图二：
祝学习愉快~
0h018-03-19 -
好帮手慕糖
2018-03-19
你好，经测试，css代码时生效的哦。
祝学习愉快~
0h018-03-19
相似问题