Question

最近我将地图文档从ESRI ArcMap 10.2.2导出到SVG。

我想用css和javascript为这个地图设置动画，但是＆＃34; clippath＆＃34; arcmap创建的多边形使得无法这样做。我怎么能得到这个团体＆＃34;波多黎各＆＃34;突出显示鼠标悬停。

这是代码摘要：

<svg width="1008pt" height="612pt" viewBox="0 0 1008 612" enable-background="new 0 0 1008 612"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Puerto_Rico_and_Virgin_Islands">
<g id="state" class="test">
    <g id="Puerto_Rico">
        <clipPath id="SVG_CP_1">
            <path d= coordinates are put in here />
        </clipPath>
    </g>
</g>

CSS

<style type="text/css">
.test{
fill: grey;
stroke:#fff;
stroke-width:0.75;
stroke-opacity:1;
fill: orange;
}
#state:hover {
fill: red !important;
</style>

真实的代码：

访问jsfiddle以获取整个代码http://jsfiddle.net/jwitcoski/arv4g21f/3/

使用不使用clippath的维基百科svg地图我能够让一切工作正常。 http://jsfiddle.net/jwitcoski/y3yhgjjy/9/

Answer 1

clipPath问题是一个红色的鲱鱼。它与你的CSS无法正常工作无关。

您的样品小提琴不起作用的原因有两个原因：

您的CSS缺少结束'}'。但我猜这只是你小提琴中的一个错字。
主要原因是PR的路径定义具有fill的表示属性。

<path fill="none" ... />

此演示文稿属性的优先级高于CSS规则，因为它更具体，因此可以覆盖它。如果删除fill="none"，一切正常。

Demo fiddle here

如何在CSS中更改或调用svg clippath多边形属性

1 个答案: