SVG 嵌入 HTML頁面的幾種方式

2021-08-29 17:50:55 字數 974 閱讀 5617

svg 嵌入 html頁面的幾種方式

svg目前嵌入html頁面中有下面幾種方式

object

< object data = " rect.svg " width = " 300 " height = " 100 "

type = " image/svg+xml "

codebase = " " />

採用object標籤的乙個好處是,這是乙個標準的html 4及以上規範的有效tag,但可惜的如果你用的是最新的adobe viewer,那麼反而是顯示不出圖象來:)

embed

< embed src ="rect.svg" width ="300" height ="100"

type ="image/svg+xml"

pluginspage ="" />

這是推薦的一種寫法,在ie與ff中,皆可工作,也可通過script使html與svg相互通訊,但不幸的是,embed不是乙個規範的標籤,所以不能直接用在嚴格的xhtml中,不過這個可以能過乙個簡單的trick來解決,改動一下dtd定義即可。

iframe

< iframe src ="rect.svg" width ="300" height ="100" >

這個方式沒什麼好說的,完全ok,就是iframe的邊框需要額外設定一下。

當然最希望看到的就是類似於下面的**能早點在主流browser中支援

< html

xmlns:svg ="" >

< body >< p > this is an html paragraph < svg:svg width ="300" height ="100" version ="1.1" >

< svg:circle cx ="100" cy ="50" r ="40" stroke ="black"

stroke-width ="2" fill ="red" />

目前還不行,呵呵。

flask中後台傳送html頁面的幾種方法

1 render template 引入html檔案,同時根據後面傳入的引數,對html進行修改渲染。注 表示這是乙個變數,可以根據使用者在模組端給予的引數的不同,進行調整from flask import render template def index data fake user retur...

jquery mobile切換頁面的幾種方法

有幾種方法來切換頁面 1.mobile.changepage path to page.html 2.mobile.changepage other page.html fade false,false 可以設定頁面切換效果,以及定義引數來控制頁面是否記錄歷史等 3.var pagedata mob...

Springboot 正確跳轉頁面的幾種方式

寫springboot專案的時候,我們經常把js,css放在static下面,把html放在templates下面,然後如果不進行任何配置或者處理的話,我們想 訪問頁面,springboot會給我們丟擲錯誤頁,現在就說一下怎麼能夠正確跳轉頁面,我這邊了解了三種方式 1.使用controller的方式...