Skip to Content
MOBILE HTML5學習手冊
book

MOBILE HTML5學習手冊

by Estelle Weyl
June 2014
Intermediate to advanced
488 pages
9h 56m
Chinese
GoTop Information, Inc.
Content preview from MOBILE HTML5學習手冊
138
|
第五章
因為
<img>
SVG 在匯入點陣式圖像時會產生安全問題,我們在網站中使用
<object>
來加入響應圖像。
<object>
元素可讓我們將外部的資源當成圖像:
<object data="awesomefile.svg" type="image/svg+xml"></object>
在預設情況下,
<object>
的寬度與父元素一樣。然而,如同圖像,我們也可以使用
width
height
屬性或 CSS
width
height
屬性來宣告寬度與高度。因為我們的 SVG
宣告了
viewbox
preserveAspectRatio
,如果只宣告一個維度(寬或高)的話,預設情
況下
<object>
會保持宣告的長寬比。
因為這項技術使用
<object>
來取代
<img>
,我們沒有
alt
屬性。當螢幕閱讀器支援 SVG
2
,若要讓這項技術具有無障礙功能,請在 SVG
<title>
裡面加入你會在
alt
屬性加入
的內容。
<object>
會嵌入 SVGSVG 會根據
<object>
的大小,將符合
@media
查詢的背景圖像拉
入,而不是根據檢視區的大小。上述的程式有兩個 HTTP 請求:一個用於 SVG,一個用
於適當的圖像。若要減少為一個 HTTP 請求,你可以在
<object>
data
屬性中加入一
個轉義的 Data URI
3
我將它稱為小丑車技術(Clown Car Technique),因為我們在一個很小的 SVG 圖像檔案
(車)之中加入許多大型的圖像(小丑)。
學習 SVG
我們只是接觸 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

JAVASCRIPT網頁應用程式設計

JAVASCRIPT網頁應用程式設計

Alex MacCaw

Publisher Resources

ISBN: 9789863471240