blocks|key|4398962|text|根据SVG1.1规范，您不能使用CSS+https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties设置SVG圆的r属性的样式。但是你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4398963|<circle+cx="168"+cy="179"+r="59"
++++++++fill="white"+stroke="black"
++++++++onmouseover="evt.target.setAttribute('r',+'72');"
++++++++onmouseout="evt.target.setAttribute('r',+'59');"/>|code-block|syntax|javascript|4398964|在某些现代浏览器部分支持的SVG2中，可以使用CSS设置圆的r属性的样式。https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes|4398965|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties|1|https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes^0|2E|1|K|1N|0|0|0|U|1|11|1Q|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>As per the SVG 1.1 specification you can't style the <code>r</code> attribute of an SVG circle using CSS <a href="https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties" rel="noreferrer">https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties</a>. But you can do:</p>

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

<p>In SVG 2, which is partially supported by some modern browsers, you can style the <code>r</code> attribute of circles using CSS. <a href="https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes" rel="noreferrer">https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes</a></p>


blocks|key|288110|text|想只使用CSS吗？使用line而不是circle。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288111|<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>|code-block|syntax|javascript|288112|http://jsfiddle.net/rLk7rd8b/|288113|entityMap|0|LINK|mutability|MUTABLE|url^0|B|4|I|6|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>Want to only use CSS? Use <code>line</code> instead of <code>circle</code>.</p>

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

<p><a href="http://jsfiddle.net/rLk7rd8b/" rel="noreferrer">http://jsfiddle.net/rLk7rd8b/</a></p>


blocks|key|1048823|text|这可以在CSS(3)中完成，方法是将圆的transform-原点设置为圆心，然后使用scale变换：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1048824|circle+{
++transform-origin:+center+center;
}

circle:hover+{
++stroke-width:+10px;
++transform:scale(1.2,+1.2);
}|code-block|syntax|javascript|1048825|entityMap^0|K|A|16|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>It can be done in CSS(3), by setting the <code>transform-</code>origin of the circle to its center and then using <code>scale</code> transformation:</p>

<pre><code>circle {
  transform-origin: center center;
}

circle:hover {
  stroke-width: 10px;
  transform:scale(1.2, 1.2);
}
</code></pre>


blocks|key|4882030|text|正如Phillip在上面的评论中建议的那样，你可以用CSS3转换来做这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4882031|++circle:hover+{
++++-webkit-transform:+scale(x,+y);
++}|code-block|syntax|javascript|4882032|("-webkit“前缀仅适用于Chrome+)|4882033|请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform|offset|length|4882034|下面是一个使用CSS转换的工作示例：http://jsbin.com/sozewiso/2|4882035|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/transform|1|http://jsbin.com/sozewiso/2^0|0|0|0|3|1M|0|0|I|R|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>As Phillip suggested in the comment above you can do this with CSS 3 transform.</p>

<pre><code>  circle:hover {
    -webkit-transform: scale(x, y);
  }
</code></pre>

<p>("-webkit" prefix is for Chrome only)</p>

<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/transform</a></p>

<p>Here's a working example with CSS transitions too: <a href="http://jsbin.com/sozewiso/2" rel="noreferrer">http://jsbin.com/sozewiso/2</a></p>


blocks|key|4881952|text|这对你来说应该是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4881953|jsfiddle|offset|length|4881954|你需要操纵半径，这只能通过javascript来完成：|4881955|$(function+()+{
++++$("svg+circle").on("mouseenter",+function+()+{

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

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

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

++++});
});|code-block|syntax|javascript|4881956|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Rx4fr/^0|0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>This should work for you.</p>

<p><a href="http://jsfiddle.net/Rx4fr/" rel="nofollow">jsfiddle</a></p>

<p>You need to manipulate the radius and this can only be done via javascript:</p>

<pre><code>$(function () {
    $("svg circle").on("mouseenter", function () {

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

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

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

    });
});
</code></pre>


blocks|key|4399055|text|点击"Run+code+snippet“进行测试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4399056|.myCircle:hover+{
++r:+20
}

.myCircle+{
++transition:+ease+1s
}|code-block|syntax|javascript|4399057|<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1">
+++++++<circle+class="myCircle"+cx="10"+cy="10"+r="5"+fill="black"+/>
++++</svg>|4399058|​|4399059|我偶然发现了这个页面，但我想添加我自己认为最简单的答案。显然，这在Firefox中不起作用，这就是为什么有人投了反对票。|4399060|第一步：将一个类(例如"myCircle")添加到你的圈子中|offset|length|style|BOLD|4399061|<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1">
+++<circle+class="myCircle"+cx="168"+cy="179"+r="59"+fill="white"+/>
</svg>|4399062|CSS第2步：在CSS文件中，您可以使用"r“作为CSS属性！|4399063|.myCircle:hover+{
++r:+100;
}|4399064|步骤3(可选)：可以随意添加一个过渡，以使半径平滑增长：|4399065|.myCircle+{
++++transition:+all+1s;
}|4399066|entityMap^0|0|0|0|0|0|0|4|0|0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@$O|1A|P|1B|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1F|8|@$O|1G|P|1H|Q|R]]|9|@]|A|$]]|$1|10|3|11|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|12|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|13|$]]

<p>Click "Run code snippet" to test it out:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.myCircle:hover {
  r: 20
}

.myCircle {
  transition: ease 1s
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
       &lt;circle class="myCircle" cx="10" cy="10" r="5" fill="black" /&gt;
    &lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>I stumbled across this page but wanted to add my own answer that I think is easiest. Apparently it doesn't work in Firefox though, which is why someone downvoted. </p>

<p><strong>Step 1:</strong> Add a class (e.g. "myCircle") to your circle</p>

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

<p><strong>Step 2:</strong> In your CSS file you can use "r" as a CSS property! </p>

<pre><code>.myCircle:hover {
  r: 100;
}
</code></pre>

<p><strong>Step 3 (optional):</strong> Feel free to add a transition to make the radius grow smoothly:</p>

<pre><code>.myCircle {
    transition: all 1s;
}
</code></pre>


blocks|key|1048715|text|我不确定，但你不能完全自定义一个svg只与css。然而，如果你要这样做，它就不会是跨浏览器的。在过去，我使用svg来创建复杂的地图，对我来说，解决方案是rapheljs。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1048716|编辑：|style|BOLD|1048717|使用@phonicx演算作为半径，我修改了代码，让something能够自定义每个圆(如果你有更多的圆)：|1048718|<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>|code-block|syntax|javascript|1048719|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/|1|http://jsfiddle.net/stefanz/D7yvL/1/^0|24|8|0|0|0|3|0|P|9|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

<p>I am not sure, but you can not full custom a svg only with css. However, if you will do it won't be cross browser. 
In the past I used svg for creating a complex map and for me the solution was <a href="http://raphaeljs.com/" rel="nofollow">rapheljs</a>. </p>

<p><strong>EDIT:</strong> </p>

<p>Using @phonicx calculus for radius i modified the code, having <a href="http://jsfiddle.net/stefanz/D7yvL/1/" rel="nofollow">something</a> which is able to customize each circle ( in case if you have more ) : </p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
   &lt;circle data-precentage='100' cx="168" cy="179" r="59" fill="red" /&gt;
   &lt;circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /&gt; 
&lt;/svg&gt;
</code></pre>


blocks|key|4881975|text|使用JQUERY：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4881976|$(function+()+{
++$('circle').hover(function()+{
++++$(this).attr('r',+100);
++},+function()+{
++++$(this).attr('r',+59);
++});
});|code-block|syntax|javascript|4881977|Demo+Here|offset|length|4881978|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/BCeSG/^0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Using JQUERY:</p>
<pre><code>$(function () {
  $('circle').hover(function() {
    $(this).attr('r', 100);
  }, function() {
    $(this).attr('r', 59);
  });
});
</code></pre>
<p><a href="http://jsfiddle.net/BCeSG/" rel="nofollow noreferrer">Demo Here</a></p>


blocks|key|1048811|text|您忘记了笔划颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048812|circle:hover+{
++++stroke:white;
++++stroke-width:10px;
+}|code-block|syntax|javascript|1048813|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You forgot the stroke color: </p>

<pre><code>circle:hover {
    stroke:white;
    stroke-width:10px;
 }
</code></pre>


blocks|key|288781|text|我正在做别的事情，遇到了这个问题。我正在做类似的事情，并使用greensock。我使用Greensock，GSAP在几个圆圈上设置了比例的动画。我需要对tranformOrigin和scale属性进行动画处理：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288782|TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50%25+50%25",ease:Bounce.easeOut},+.08);|code-block|syntax|javascript|288783|示例https://codepen.io/grmdgs/pen/RgjdPv|offset|length|288784|Greensock+https://greensock.com/|288785|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/grmdgs/pen/RgjdPv|1|https://greensock.com/^0|0|0|2|10|0|0|A|M|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>I was working on something else and came across this question. I'm doing something similar and using greensock. I animated the scale on a couple circles using Greensock, GSAP. I needed to animate tranformOrigin and the scale property:</p>

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

<p>Example
<a href="https://codepen.io/grmdgs/pen/RgjdPv" rel="nofollow noreferrer">https://codepen.io/grmdgs/pen/RgjdPv</a></p>

<p>Greensock
<a href="https://greensock.com/" rel="nofollow noreferrer">https://greensock.com/</a></p>


blocks|key|1048901|text|如果你想扩展它，尝试使用transform:+scale(1,5)，这样你就不需要改变cx，cy，r属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1048902|entityMap^0|C|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>If you want to scale it, try with <code>transform: scale(1,5)</code>,
so you don't need to change cx,cy,r attributes.</p>


<p>So I have my SVG-circle. </p>

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

<p>I want it to be 120% when one hover the circle. I tried both with width, height and stroke. Haven't find any solution to make the circle bigger when hovering. Any suggestions?</p>

<pre><code>circle:hover
  {
    stroke-width:10px;
  }

circle:hover
  {
    height: 120%;
    width: 120%;
  }
</code></pre>


Style SVG circle with CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

所以我有我的SVG-circle。<svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <circle cx="168" cy="179" r="59" fill="white" /></svg>当一个人在圆圈上悬停时，我希望它是120%。我尝试了宽度，高度和笔触。还没有找到任何解决方案，让圆圈在悬停时变大。有什么建议吗？circle:h

问使用CSS设置SVG圆的样式
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS设置SVG圆的样式EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS设置SVG圆的样式
EN