35

所以我有我的 SVG 圆。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="168" cy="179" r="59" fill="white" />
</svg>

当一个人悬停在圆圈上时，我希望它是 120%。我尝试了宽度，高度和笔划。悬停时没有找到使圆圈变大的任何解决方案。有什么建议么？

circle:hover
  {
    stroke-width:10px;
  }

circle:hover
  {
    height: 120%;
    width: 120%;
  }
4

11 回答 11

37

根据 SVG 1.1 规范，您不能r使用 CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties设置 SVG 圆圈的属性样式。但你可以这样做：

<circle cx="168" cy="179" r="59"
        fill="white" stroke="black"
        onmouseover="evt.target.setAttribute('r', '72');"
        onmouseout="evt.target.setAttribute('r', '59');"/>

在某些现代浏览器部分支持的 SVG 2 中，您可以r使用 CSS 设置圆的属性样式。https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

于 2013-01-10T12:36:02.763 回答
36

只想使用 CSS？使用line而不是circle.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
    .circle {
        stroke-width: 59;
        stroke-linecap: round;
    }
    .circle:hover {
        stroke-width: 71;
    }
    </style>
    <line x1="168" y1="179" x2="168" y2="179" stroke="white" class="circle" />
</svg>

http://jsfiddle.net/rLk7rd8b/

于 2013-07-03T23:46:30.850 回答
28

它可以在 CSS(3) 中完成，通过将transform-圆的原点设置为其中心，然后使用scale转换：

circle {
  transform-origin: center center;
}

circle:hover {
  stroke-width: 10px;
  transform:scale(1.2, 1.2);
}
于 2014-10-31T14:51:20.087 回答
6

正如 Phillip 在上面的评论中建议的那样，您可以使用 CSS 3 转换来做到这一点。

  circle:hover {
    -webkit-transform: scale(x, y);
  }

（“-webkit”前缀仅适用于 Chrome）

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform

这里也是一个 CSS 转换的工作示例：http: //jsbin.com/sozewiso/2

于 2014-05-09T11:38:43.467 回答
1

这应该适合你。

jsfiddle

您需要操纵半径，这只能通过 javascript 完成：

$(function () {
    $("svg circle").on("mouseenter", function () {

        var oldR = $(this).attr("r");

        var newR = (((oldR*2)/100)*120)/2; // 120% width

        $(this).attr("r", newR);

    });
});
于 2013-01-10T10:40:13.643 回答
1

单击“运行代码片段”进行测试： 

.myCircle:hover {
  r: 20
}

.myCircle {
  transition: ease 1s
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle class="myCircle" cx="10" cy="10" r="5" fill="black" />
    </svg>

我偶然发现了这个页面，但想添加我自己认为最简单的答案。显然它在 Firefox 中不起作用，这就是为什么有人反对。

第 1 步：将课程（例如“myCircle”）添加到您的圈子

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle class="myCircle" cx="168" cy="179" r="59" fill="white" />
</svg>

第 2 步：在您的 CSS 文件中，您可以使用“r”作为 CSS 属性！

.myCircle:hover {
  r: 100;
}

第 3 步（可选）：随意添加过渡以使半径平滑增长：

.myCircle {
    transition: all 1s;
}
于 2020-01-16T15:09:29.757 回答
0

我不确定，但是您不能仅使用 css 完全自定义 svg。但是，如果您这样做，它将不会是跨浏览器。过去我使用 svg 创建复杂的地图，对我来说解决方案是rapheljs。

编辑：

使用@phonicx calculus for radius 我修改了代码，有一些东西可以自定义每个圆（如果你有更多的话）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle data-precentage='100' cx="168" cy="179" r="59" fill="red" />
   <circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /> 
</svg>
于 2013-01-10T10:29:59.233 回答
0

使用 JQUERY：

$(function () {
  $('circle').hover(function() {
    $(this).attr('r', 100);
  }, function() {
    $(this).attr('r', 59);
  });
});

在这里演示

于 2013-01-10T10:42:26.350 回答
0

您忘记了笔触颜色：

circle:hover {
    stroke:white;
    stroke-width:10px;
 }
于 2014-06-04T14:45:00.587 回答
0

我正在做其他事情，遇到了这个问题。我正在做类似的事情并使用greensock。我使用 Greensock、GSAP 在几个圆圈上设置了动画比例。我需要为 transformOrigin 和 scale 属性设置动画：

TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08);

示例 https://codepen.io/grmdgs/pen/RgjdPv

绿袜 https://greensock.com/

于 2017-06-27T22:22:36.277 回答
0

如果您想对其进行缩放，请尝试使用transform: scale(1,5)，因此您无需更改 cx,cy,r 属性。

于 2020-04-19T21:54:17.463 回答