問題描述
所以我有我的 SVG 圓.
So I have my SVG-circle.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="168" cy="179" r="59" fill="white" />
</svg>
當(dāng)一個(gè)人懸停在圓圈時(shí)，我希望它是 120%.我嘗試了寬度，高度和筆劃.懸停時(shí)沒有找到使圓圈變大的任何解決方案.有什么建議嗎?
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?
circle:hover
{
stroke-width:10px;
}
circle:hover
{
height: 120%;
width: 120%;
}
推薦答案
根據(jù) SVG 1.1 規(guī)范，您不能使用 CSS 設(shè)置 SVG 圓圈的 r 屬性的樣式 https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties.但你可以這樣做:
As per the SVG 1.1 specification you can't style the r attribute of an SVG circle using CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties. But you can do:
<circle cx="168" cy="179" r="59"
fill="white" stroke="black"
onmouseover="evt.target.setAttribute('r', '72');"
onmouseout="evt.target.setAttribute('r', '59');"/>
在某些現(xiàn)代瀏覽器部分支持的 SVG 2 中，您可以使用 CSS 設(shè)置圓的 r 屬性樣式.https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes
In SVG 2, which is partially supported by some modern browsers, you can style the r attribute of circles using CSS. https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes
這篇關(guān)于使用 CSS 樣式化 SVG 圓圈的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！