SVG第3課：HTML頁(yè)面中的SVG

2020-12-03 20:09:47

字體：大中小

供稿：網(wǎng)友

SVG 文件可通過(guò)以下標(biāo)簽嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。

HTML 頁(yè)面中的 SVG
下面，你會(huì)看到三種把 SVG 文件嵌入 HTML 頁(yè)面的不同方法。

使用 <embed> 標(biāo)簽
<embed> 標(biāo)簽被所有主流的瀏覽器支持，并允許使用腳本。

注釋?zhuān)寒?dāng)在 HTML 頁(yè)面中嵌入 SVG 時(shí)使用 <embed> 標(biāo)簽是 Adobe SVG Viewer 推薦的方法！然而，如果需要?jiǎng)?chuàng)建合法的 XHTML，就不能使用 <embed>。任何 HTML 規(guī)范中都沒(méi)有 <embed> 標(biāo)簽。

語(yǔ)法：

注釋?zhuān)簆luginspage 屬性指向下載插件的 URL。

使用 <object> 標(biāo)簽
<object> 標(biāo)簽是 HTML 4 的標(biāo)準(zhǔn)標(biāo)簽，被所有較新的瀏覽器支持。它的缺點(diǎn)是不允許使用腳本。

注釋?zhuān)杭偃缒惭b了最新版本的 Adobe SVG Viewer，那么當(dāng)使用 <object> 標(biāo)簽時(shí) SVG 文件無(wú)法工作（至少不能在 IE 中工作）！

語(yǔ)法：

注釋?zhuān)篶odebase 屬性指向下載插件的 URL。

使用 <iframe> 標(biāo)簽
<iframe> 標(biāo)簽可工作在大部分的瀏覽器中。

語(yǔ)法：

我期望....
如果僅僅通過(guò)引用 SVG 的命名空間，就能夠把 SVG 元素之間添加到 HTML 代碼中，那就太棒了，這像這樣：

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>

<p>This is an HTML paragraph</p>

<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>

</body>
</html>

上一篇：SVG第2課：一個(gè)例子

下一篇：SVG第4課：SVG <rect>

學(xué)習(xí)交流

硬盤(pán)分區(qū)之整數(shù)G計(jì)算公式附在線計(jì)算工具

硬盤(pán)分區(qū)之整數(shù)G計(jì)算公式附在線計(jì)算工具原創(chuàng)...

熱門(mén)圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注