使用 CSS 样式化 SVG 圆圈

Question

所以我有我的 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%;
  }

Answer 1

使用 JQUERY：

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

Demo Here

Answer 2

如果你想扩展它，试试transform: scale(1,5)， 所以你不需要改变 cx,cy,r 属性。

Answer 3

点击“运行代码sn-p”进行测试：

.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;
}

Answer 4

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

circle {
  transform-origin: center center;
}

circle:hover {
  stroke-width: 10px;
  transform:scale(1.2, 1.2);
}

Answer 5

我正在做其他事情并遇到了这个问题。我正在做类似的事情并使用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/

Answer 6

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

<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 中，您可以使用 CSS 设置圆圈的 r 属性样式。 https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 7

只想使用 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/

Answer 8

你忘记了描边颜色：

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

Answer 9

正如 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

Answer 10

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

编辑：

对半径使用@phonicx 演算我修改了代码，拥有something 可以自定义每个圆（以防万一）：

<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>

Answer 11

这应该适合你。

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);

    });
});