亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

SVG CSS樣式

我們可以使用CSS設(shè)置SVG形狀的樣式。樣式是指改變形狀的外觀。這可以是筆觸顏色和寬度，填充顏色，不透明度和形狀的許多其他屬性。

有6種樣式可以設(shè)置SVG圖像中的形狀。每個都將在本文中介紹。在本文的結(jié)尾，您將找到可以與SVG一起使用的CSS屬性的列表。

使用CSS樣式屬性

是否可以使用特定的樣式屬性（例如stroke和fill）來樣式化SVG形狀。這是一個示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" stroke="#000000" fill="#00ff00" />
</svg>
測試看看?/?

雖然有一系列可用的樣式屬性。但是，建議您使用內(nèi)聯(lián)樣式表或外部樣式表，因此在這里我不會過多介紹樣式屬性。

使用style屬性和CSS屬性

此方法不使用任何特定于樣式的屬性。相反，它僅使用 style屬性并在其中指定CSS屬性。如果您需要直接在樣式中嵌入樣式，則此方法優(yōu)于特定屬性，因?yàn)槟梢詫W(xué)習(xí)CSS屬性的名稱。內(nèi)部或外部樣式表中的CSS屬性都是相同的，因此復(fù)制粘貼和學(xué)習(xí)此類內(nèi)容更加容易。

這是一個通過style 屬性和CSS屬性設(shè)置描邊和填充的圓圈：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="40" cy="40" r="24" style="stroke: #000000; fill:#00ff00;" /></svg>
測試看看?/?

使用內(nèi)聯(lián)樣式表

可以在嵌入式樣式表中定義形狀的樣式，然后將所有這些樣式自動應(yīng)用到形狀。這是一個示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <style type="text/css" >
      <![CDATA[

        circle {
           stroke: #006600;
           fill:   #00cc00;
        }

      ]]>
    </style>
    
    <circle  cx="40" cy="40" r="24"/>
</svg>
測試看看?/?

注意在<style>元素內(nèi)部如何定義circle元素的樣式。這與HTML和CSS中的工作方式相同。

內(nèi)部樣式表在Internet Explorer 7和Firefox 3.0.5中均能正常工作。

效果如下:

class類屬性

可以class將形狀中的屬性用于選擇該形狀的樣式，而不是將樣式應(yīng)用于特定類型的所有形狀（例如，所有圓形）。就像class在HTML元素中使用屬性一樣。

這是兩個圓圈樣式的示例-綠色和紅色。<circle>使用以下class 屬性，將這兩種樣式中的每一種都應(yīng)用于各自的元素 ：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <style type="text/css" >
      <![CDATA[

        circle.myGreen {
           stroke: #006600;
           fill:   #00cc00;
        }
       circle.myRed {
       stroke: #660000;
       fill:   #cc0000;
    }

      ]]>
    </style>

    <circle  class="myGreen" cx="40" cy="40"  r="24"/>
    <circle  class="myRed"   cx="40" cy="100" r="24"/>
</svg>
測試看看?/?

請注意circle，樣式表中的選擇器名稱如何帶有.myGreen和后綴.myRed?，F(xiàn)在，<circle>元素可以使用class="myGreen" 定義綠色或 class="myRed"定義紅色圓圈樣式。

使用外部樣式表

使用外部樣式表時，樣式表會放在一個單獨(dú)的文件中，然后放在Web服務(wù)器上，就像HTML頁面的外部CSS文件一樣。另外，在<svg>元素之前，您需要在SVG文件中包含以下聲明：

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

該處理指令告訴SVG查看器使用CSS樣式表找到文件“ svg-stylesheet.css”。

這是一個在SVG文件中使用聲明的示例：

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">


    <circle cx="40" cy="40" r="24"
       style="stroke:#006600; fill:#00cc00"/>

</svg>

注意：外部CSS樣式表在Internet Explorer 7中似乎可以正常工作，但在Firefox 3.0.5中則不能。

在HTML頁面中使用樣式表。

如果將SVG圖像嵌入HTML頁面中，則還可以將SVG圖像的樣式表嵌入HTML頁面中。這是一個示例：

<html>
<body>

<style>
</style>

<svg>
</svg>

</body>
</html>
測試看看?/?

要將樣式添加到SVG圖像內(nèi)的形狀，只需在style 元素內(nèi)添加常規(guī)CSS屬性即可。您可以使用通常用于HTML的CSS選擇器來設(shè)置SVG元素的樣式。這是一個HTML頁面，其circle元素通過HTML頁面中的CSS樣式表進(jìn)行樣式設(shè)置：

<html>
<body>

<style>
  circle {
     stroke: #006600;
     fill  : #00cc00;
  }
</style>

<svg>
  <circle cx="40" cy="40" r="24" />
</svg>

</body>
</html>
測試看看?/?

如果將SVG圖像直接嵌入HTML頁面中，則這可能是設(shè)置SVG形狀樣式的最簡單方法。

在形狀中局部覆蓋樣式表

如果已在樣式表中設(shè)置了樣式的樣式，則可以通過在要為其設(shè)置新樣式的形狀內(nèi)本地設(shè)置新的樣式屬性來覆蓋此樣式。在形狀內(nèi)部局部設(shè)置的樣式始終優(yōu)先于內(nèi)部或外部樣式表中定義的樣式。

SVG CSS屬性

SVG元素具有以下可以設(shè)置的CSS屬性。并非所有元素都具有所有這些CSS屬性。因此，CSS屬性被分為針對不同元素的多個表。

形狀CSS屬性

path元素和其他形狀元素的 CSS屬性：

CSS屬性描述
fill設(shè)置形狀的填充顏色。
fill-opacity設(shè)置形狀的填充不透明度。
fill-rule設(shè)置形狀的填充規(guī)則。
marker設(shè)置沿此形狀的線（邊）使用的標(biāo)記。
marker-start設(shè)置沿此形狀的線（邊）使用的開始標(biāo)記。
marker-mid設(shè)置沿此形狀的線（邊）使用的中間標(biāo)記。
marker-end設(shè)置沿此形狀的線（邊）使用的結(jié)束標(biāo)記。
stroke設(shè)置用于繪制此形狀輪廓的筆觸（線條）顏色。
stroke-dasharray設(shè)置用于繪制此形狀輪廓的筆劃（虛線）。
stroke-dashoffset設(shè)置用于繪制此形狀輪廓的筆劃（直線）破折號偏移量。
stroke-linecap設(shè)置用于繪制此形狀輪廓的筆劃（線）線帽。有效值為round，butt和square。
stroke-miterlimit設(shè)置用于繪制此形狀輪廓的筆劃（直線）斜接限制。
stroke-opacity設(shè)置用于繪制此形狀輪廓的筆觸（直線）不透明度。
stroke-width設(shè)置用于繪制此形狀輪廓的筆觸（線條）寬度。
text-rendering設(shè)置用于繪制此形狀輪廓的文本渲染。

文字CSS屬性

text元素的 CSS屬性：

CSS屬性描述
alignment-baseline設(shè)置文本與其對齊方式x和y坐標(biāo)。
baseline-shift設(shè)置用于呈現(xiàn)文本的基線偏移。
dominant-baseline設(shè)置主要基線。
glyph-orientation-horizontal設(shè)置水平字形方向。
glyph-orientation-vertical設(shè)置垂直字形方向。
kerning設(shè)置渲染文本的字距（字距是字母間距）。

漸變CSS屬性

SVG漸變的CSS屬性：

CSS屬性描述
stop-color設(shè)置在漸變中使用的stop元素中使用的終止色。
stop-opacity設(shè)置stop在漸變中使用的元素中使用的停止不透明度。