本指南探討了CSS和可伸縮矢量圖形（SVG）的相交，重點(diǎn)是使用CSS屬性進(jìn)行樣式SVG元素。盡管存在許多SVG屬性，但只有某些SVG屬性（主要呈現(xiàn)屬性）才能直接使用CSS來(lái)設(shè)計(jì)。某些CSS屬性與SVG共享（例如font-size和opacity ），而另一些則是SVG特定的。

例如，要為元素變色， fill屬性在CSS中起作用，因?yàn)?code>fill是一個(gè)呈現(xiàn)屬性：

圓圈 {
  填充：紅色；
}

本指南全面詳細(xì)介紹了可用的SVG元素及其相應(yīng)的CSS屬性，涵蓋了包括通用樣式和動(dòng)畫在內(nèi)的各種樣式技術(shù)。

SVG元素和CSS屬性：分類的概述

以下概述演示文稿歸因于CSS屬性，為了清楚起見。棄用元素被排除在外。

CSS和SVG共享屬性

字體屬性

文本屬性

掩蔽屬性

交互性屬性

顏色屬性

可見性屬性

SVG特異性CSS屬性

文本屬性

剪輯屬性

掩蔽屬性

過(guò)濾效果

梯度特性

交互性屬性

顏色屬性

繪畫特性

SVG 2和CSS樣式

雖然呈現(xiàn)歸因于CSS和SVG樣式之間的差距，但SVG 2（目前在候選建議中）顯著增強(qiáng)了這種交互，從而可以控制使用CSS對(duì)元素坐標(biāo)和尺寸的控制。

SVG 2規(guī)范闡明了：

“某些樣式屬性不僅可以用樣式表和'樣式'屬性指定，還可以在演示屬性中指定。這些是其名稱匹配（或相似）的屬性，與給定的CSS屬性匹配（或相似），其值被解析為該屬性的值?！?/p>

這意味著CSS，包括:hover和:active ，可以通過(guò)演示屬性或樣式表的svg屬性進(jìn)行樣式屬性。 SVG 2還引入了用于樣式的其他演示屬性。有關(guān)完整列表，請(qǐng)參閱SVG 2規(guī)范。

特定于元素的屬性支持

要記住，CSS屬性支持隨SVG元素的不同而言至關(guān)重要。某些屬性是特定于元素的。例如，<circle></circle>和<ellipse></ellipse>支持cx ， cy ， rx和ry ，但其他元素可能不會(huì)。

幾何特性

SVG 2將諸如rx和ry類的屬性定義為幾何屬性，可與CSS與填充或沖程等呈現(xiàn)屬性以及諸如fill或stroke類的屬性。

用CSS定位SVG元素（SVG 2）

SVG 2允許基于CSS的定位?？紤]一個(gè)矩形：

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

使用SVG 2，可以通過(guò)CSS控制x和y屬性：

 / *與SVG 2 */
rect {
  X：10;
  Y：10;
  / * ...其他樣式... */
}

將SVG標(biāo)記簡(jiǎn)化為：

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

同樣，可以使用CSS設(shè)置width和height ，從而進(jìn)一步最小化SVG代碼。

目前，Blink（Chrome，Opera）和Webkit（Safari）瀏覽器為這些SVG 2功能提供了更好的支持。對(duì)于更廣泛的兼容性，需要替代技術(shù)。

SVG形狀與CSS變形

CSS可用于創(chuàng)建形狀變形效果。涉及的SVG路徑必須具有相同的命令，并具有相同數(shù)量的成功變形。

示例：將三角形變成正方形。

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

CSS覆蓋路徑：

小路 {
  D：路徑（“ M150，10 L40，200 L260，200Z”）; / *初始形狀 */
  填充：＃4C6EDB;
}

路徑：活動(dòng){
  D：路徑（“ M10,10 L160,10 L160,160 L10,160 Z”）; / *變形的形狀 */
  填充：＃4C6EDB;
  過(guò)渡：所有0.35 s selie;
}

SVG標(biāo)記簡(jiǎn)化為：

<svg height="220" width="300"><path></path></svg>

用CSS對(duì)SVG屬性進(jìn)行動(dòng)畫操作

CSS動(dòng)畫和過(guò)渡動(dòng)畫SVG屬性。此示例演示了一個(gè)帶有五個(gè)圓圈的波動(dòng)動(dòng)畫：

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

具有變量的CSS和:nth-child() ：

 / * ...顏色和初始圓形樣式的CSS ... */

。形狀 {
  / * ...初始樣式... */
  動(dòng)畫：Movecircle 1250ms易于插入兩個(gè)無(wú)限；
}

/ * ...每個(gè)圓圈的動(dòng)畫 -   -  */

@keyframes movecircle {
  50％{
    CY：150;
    R：13;
  }
}

動(dòng)畫<pattern></pattern>元素也是可能的。

結(jié)論

盡管SVG 2具有功能強(qiáng)大的CSS樣式功能，但仍在開發(fā)廣泛的瀏覽器支持。供生產(chǎn)使用，請(qǐng)仔細(xì)考慮兼容性。隨著SVG 2的成熟，SVG幾何特性的CSS樣式將變得越來(lái)越強(qiáng)大和可靠。

以上是CSS指南中的SVG屬性的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！