資訊專欄INFORMATION COLUMN
摘要：圖片可以用代碼控制其樣式但作為圖片導入的時候不起作用這時候可以用這種辦法圖片文件轉換成使用圖片的好處很多其中因為圖片本身就是有代碼構成的矢量圖片代碼是所以可以對其進行修飾也就是說能夠對圖片的元素進行動態的樣式變換但在網頁中使用資源的時候是按
svg圖片可以用css代碼控制其樣式, 但作為圖片導入的時候css不起作用, 這時候可以用這種辦法.SVG圖片文件轉換成Inline Code
使用svg圖片的好處很多, 其中因為svg圖片本身就是有代碼構成的矢量圖片, 代碼是Marked Language, 所以css可以對其進行修飾. 也就是說能夠對svg圖片的元素進行動態的樣式變換.
但在網頁中使用svg資源的時候是按圖片導入, css代碼不會適用到圖片內部的代碼里, 想要讓樣式起作用我們要將svg的代碼暴露出來.
svg2inline: ->
jQuery("img.svg").each ->
$img = jQuery(this)
imgID = $img.attr("id")
imgClass = $img.attr("class")
imgURL = $img.attr("src")
jQuery.get(imgURL,
(data) =>
$svg = jQuery(data).find("svg")
$svg = $svg.attr("id", imgID) if typeof imgID != undefined
$svg = $svg.attr("class", imgClass + " replaced-svg") if typeof imgClass != undefined
$svg = $svg.removeAttr("xmlns:a")
$img.replaceWith($svg)
, "xml")
在頁面導入之前定義svg2inline, 在使用svg格式圖片的時候在 加上svg類名,
之后再頁面渲染之后呼出一次, 頁面中的svg圖片就都渲染為代碼了.
這個方式的最大問題在于,她會對網頁中所有的對應圖片地址重新要求一次圖片, 對與svg內容多的網頁會有一定的資源消耗, 效率不高.
只適用于使用若干圖片的首頁之類.
對列表中使用的svg icon之類的情況,會很浪費
瀏覽器請求圖片的時候都會放到緩存里,有重復的圖片就直接調用緩存, 但這個方法則會每次都發送請求. 列表中的icon之類的使用這個方法將會是個噩夢...
因為我使用CoffeeScript, 所以語法看起來會很怪.
svg2inline = function(){
jQuery(".img.svg").each( function() {
var $img = jQuery(this);
var imgID = $img.attr("id");
var imgClass = $img.attr("class");
var imgURL = $img.attr("src");
jQuery.get(imgURL, function(data){
var $svg = jQuery(data).find("svg");
if(typeof(imgID) != undefined){
$svg = $svg.attr("id", imgID);
}
if (typeof(imgClass) != undefined){
$svg = $svg.attr("class", imgClass+" replaced-svg");
}
$svg = $svg.removeAttr("smlns:a")
$img.replaceWith($svg)
});
});
}
好了, 我嘗試轉成了JS, 太久沒用, 又是盲打, 希望沒有寫錯...(請叫我不會用JS的前端 ??)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116787.html
摘要：在中使用很簡單，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通過控制，但是又想避免內聯的弊端，可以在里面使用。記得去掉換行它可以在上述的所有場景里面使用，除了內聯。 原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻譯作者: https://github.com/chenmf6 翻譯出處：https://gi...
摘要：在中使用很簡單，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通過控制，但是又想避免內聯的弊端，可以在里面使用。記得去掉換行它可以在上述的所有場景里面使用，除了內聯。 原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻譯作者: https://github.com/chenmf6 翻譯出處：https://gi...
摘要：結論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導一下問題。 SVG vs I...
摘要：結論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導一下問題。 SVG vs I...
閱讀 1296·2021-11-04 16:09
閱讀 3483·2021-10-19 11:45
閱讀 2395·2021-10-11 10:59
閱讀 1009·2021-09-23 11:21
閱讀 2762·2021-09-22 10:54
閱讀 1129·2019-08-30 15:53
閱讀 2599·2019-08-30 15:53
閱讀 3476·2019-08-30 12:57
