CSS指南中的SVG屬性

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

例如，要為元素變色， fill屬性在CSS中起作用，因為fill是一個呈現屬性：

圓圈 {
  填充：紅色；
}

本指南全面詳細介紹了可用的SVG元素及其相應的CSS屬性，涵蓋了包括通用樣式和動畫在內的各種樣式技術。

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

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

CSS和SVG共享屬性

字體屬性

文本屬性

掩蔽屬性

交互性屬性

顏色屬性

可見性屬性

SVG特異性CSS屬性

文本屬性

剪輯屬性

掩蔽屬性

過濾效果

梯度特性

交互性屬性

顏色屬性

繪畫特性

SVG 2和CSS樣式

雖然呈現歸因於CSS和SVG樣式之間的差距，但SVG 2（目前在候選建議中）顯著增強了這種交互，從而可以控制使用CSS對元素坐標和尺寸的控制。

SVG 2規範闡明了：

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

這意味著CSS，包括:hover和:active ，可以通過演示屬性或樣式表的svg屬性進行樣式屬性。 SVG 2還引入了用於樣式的其他演示屬性。有關完整列表，請參閱SVG 2規範。

特定於元素的屬性支持

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

幾何特性

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

用CSS定位SVG元素（SVG 2）

SVG 2允許基於CSS的定位。考慮一個矩形：

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

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

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

將SVG標記簡化為：

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

同樣，可以使用CSS設置width和height ，從而進一步最小化SVG代碼。

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

SVG形狀與CSS變形

CSS可用於創建形狀變形效果。涉及的SVG路徑必須具有相同的命令，並具有相同數量的成功變形。

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

<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：路徑（“ M10,10 L160,10 L160,160 L10,160 Z”）; / *變形的形狀 */
  填充：＃4C6EDB;
  過渡：所有0.35 s selie;
}

SVG標記簡化為：

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

用CSS對SVG屬性進行動畫操作

CSS動畫和過渡動畫SVG屬性。此示例演示了一個帶有五個圓圈的波動動畫：

<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 ... */

。形狀 {
  / * ...初始樣式... */
  動畫：Movecircle 1250ms易於插入兩個無限；
}

/ * ...每個圓圈的動畫 -   -  */

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

動畫<pattern></pattern>元素也是可能的。

結論

儘管SVG 2具有功能強大的CSS樣式功能，但仍在開發廣泛的瀏覽器支持。供生產使用，請仔細考慮兼容性。隨著SVG 2的成熟，SVG幾何特性的CSS樣式將變得越來越強大和可靠。

以上是CSS指南中的SVG屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！