样式SVG圈与CSS

所以我有我的SVG圈子。样式SVG圈与CSS

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

来源

2013-01-10 Sebastian

不知道它的存在对SVG，但对于CSS3转换？ – philipp

对于css变换+1，笔画在OP示例中不起作用，因为他没有定义“笔触”颜色。使用与圆形填充相同的颜色，它会看起来“更大”。 – cvsguimaraes

由于按照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

来源

2013-01-10 12:36:02

'onmouseover =“this.setAttribute（'r'，'72'）;'应该也可以很好地工作 –

好的解决方案，即使它不是用CSS，谢谢！ – Sebastian

2016年的正确答案似乎是一个通过Anshul – Fanky

我不确定，但是你不能完全自定义只有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>

来源

2013-01-10 10:29:59 stefanz

这应该为你工作。

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-10 10:40:13 phonicx

它不会在mouseleave上转到原始大小 –

是的，只需添加代码以恢复mouseleave上的旧半径，这是一个很好的答案。 –

有2个圈，使较大的可见性：隐藏或显示：无。在悬停时，使可见较大，不可见较小。

来源

2013-01-10 10:42:14

使用此：

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

Demo Here

来源

2013-01-10 10:42:26

想只使用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-03 23:46:30 interestinglythere

+1很好的答案！我在' stofl

不完全（ – Ben

）下面是我看到的，它对我来说很像是圆形的。http://i.imgur.com/cKX9n3a.png @Ben，你用什么浏览器？ – interestinglythere

正如菲利普建议在评论上面可以做到这一点与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-09 11:38:43

根据http：// caniuse .com /＃search = transform，但大多数供应商已经删除了前缀，这个例外（在编写本文时）是Safari，它仍然使用'-webkit' – rummik

你忘了笔触颜色：

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

来源

2014-06-04 14:45:00

尝试了这个解决方案，但它在Chrome中很麻烦，有时候圆圈将只是一个轮廓。 – Ben

不确定如果这个人n仍然在寻找答案，但对于其他任何人，都可以在CSS（3）中完成，方法是将圆的变换原点设置为中心。

circle { 
    transform-origin: 168px 179px; 
    transform: scale(1,1);

}

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

需要说明的是CSS现在加上尺寸，我们必须要知道在SVG圈的正中心。

来源

2014-10-31 14:51:20 Anshul

是的！ Plus前缀让它跨浏览器（-o-transform-origin，-webkit-transform-origin，-moz-transform-origin，-o-transform，-webkit-transform，-moz-transform） – Fanky

稍有不同的情况，但它对我起作用为“50％50％”，并从“scale（0,0）”转换为“scale（1,1）”。居中且仍未指定绝对大小。 – Ben

我正在处理其他事情，并且遇到了这个问题。我正在做类似的事情，并使用绿色环保。我使用Greensock，GSAP在两个圆圈上制作了比例尺。我需要动画tranformOrigin和规模属性：

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

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

使用GreenSock https://greensock.com/

来源

2017-06-27 22:22:36 grmdgs

样式SVG圈与CSS

回答

相关问题