在應用程序的任何位置調用svg視圖元素

我無法弄清楚如何調用保存在單個svg圖像中的圖標，首先我想了解座標是如何工作的，我的意思是如何調用某個圖標一個大圖像像<img>一個html元素，我讀的地方，有一種方法，通過名稱，如果你已經安裝<view>元素像這樣來調用圖標：在應用程序的任何位置調用svg視圖元素

<view id="icon-heart-view" viewBox="0 32 32 32" /> 
<img src="icons.svg#icon-heart-view" alt="Heart">

但我不知道他們是如何加載到頁面只調用它們的視圖元素？也有許多不同的意見時，我將如何存儲他們都可以在任何地方打電話給任何圖標？

我在MEAN Stack下構建我的應用程序，如果有人知道這個請分享一個技巧。

來源

2015-11-14 Jonathan Solorzano

我覺得這個頁面會回答你很多問題： https://css-tricks.com/svg-fragment-identifiers-work/

圖片加載任何圖像，但顯示時將使用命名視圖從SVG文件或視框在裏面鏈接。

在圖像我有3個視圖元素

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="252" height="68" 
    viewBox="0 0 126 34" 
    id="Cannulation" 
    version="1.1"> 

    <view id="buttonhole" viewBox="0 0 126 34" /> 
    <view id="ropeladder" viewBox="0 35 126 34" /> 
    <view id="area" viewBox="0 70 126 34" /> 
<!-- Image contents here --> 
</svg>

顯示圖像而沒有任何參數，將顯示從SVG-元件的視框

<img src="Cannulation.svg"/>

默認視圖要顯示在第三視圖這個SVG文件我可以使用以下任何一種：

<!-- View named "area" in svg-file --> 
<img src="Cannulation.svg#area"/> 
<!-- View created in html, no view necessary in svg-file --> 
<img src="Cannulation.svg#svgView(viewBox(0,70,126,34))"/>

同樣的三個例子CSS：

body { background: url("Cannulation.svg") } 
body { background: url("Cannulation.svg#area") } 
body { background: url("Cannulation.svg#svgView(viewBox(0,70,126,34))") }

視框的值是：

viewBox(start_x, start_y, width, height)

左上角將是（0,0）

編輯：輾轉聯繫到我的測試網站，因爲鏈接只是暫時的

來源

2015-11-14 23:29:13

這應該是一個評論，實際上從那裏是我從哪裏拿過的例子 –

這是什麼幫助？ –

不知何故，但我真的需要知道的是，我怎麼才能在應用程序中加載圖像一次，然後繼續使用svg來獲取圖標... –

在應用程序的任何位置調用svg視圖元素

回答

相關問題