資訊專欄INFORMATION COLUMN
摘要：圖片可以用代碼控制其樣式但作為圖片導(dǎo)入的時候不起作用這時候可以用這種辦法圖片文件轉(zhuǎn)換成使用圖片的好處很多其中因?yàn)閳D片本身就是有代碼構(gòu)成的矢量圖片代碼是所以可以對其進(jìn)行修飾也就是說能夠?qū)D片的元素進(jìn)行動態(tài)的樣式變換但在網(wǎng)頁中使用資源的時候是按
svg圖片可以用css代碼控制其樣式, 但作為圖片導(dǎo)入的時候css不起作用, 這時候可以用這種辦法.SVG圖片文件轉(zhuǎn)換成Inline Code
使用svg圖片的好處很多, 其中因?yàn)閟vg圖片本身就是有代碼構(gòu)成的矢量圖片, 代碼是Marked Language, 所以css可以對其進(jìn)行修飾. 也就是說能夠?qū)vg圖片的元素進(jìn)行動態(tài)的樣式變換.
但在網(wǎng)頁中使用svg資源的時候是按圖片導(dǎo)入, css代碼不會適用到圖片內(nèi)部的代碼里, 想要讓樣式起作用我們要將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")
在頁面導(dǎo)入之前定義svg2inline, 在使用svg格式圖片的時候在 加上svg類名,
之后再頁面渲染之后呼出一次, 頁面中的svg圖片就都渲染為代碼了.
這個方式的最大問題在于,她會對網(wǎng)頁中所有的對應(yīng)圖片地址重新要求一次圖片, 對與svg內(nèi)容多的網(wǎng)頁會有一定的資源消耗, 效率不高.
只適用于使用若干圖片的首頁之類.
對列表中使用的svg icon之類的情況,會很浪費(fèi)
瀏覽器請求圖片的時候都會放到緩存里,有重復(fù)的圖片就直接調(diào)用緩存, 但這個方法則會每次都發(fā)送請求. 列表中的icon之類的使用這個方法將會是個噩夢...
因?yàn)槲沂褂肅offeeScript, 所以語法看起來會很怪.
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)
});
});
}
好了, 我嘗試轉(zhuǎn)成了JS, 太久沒用, 又是盲打, 希望沒有寫錯...(請叫我不會用JS的前端 ??)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116787.html
摘要：在中使用很簡單，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通過控制，但是又想避免內(nèi)聯(lián)的弊端，可以在里面使用。記得去掉換行它可以在上述的所有場景里面使用，除了內(nèi)聯(lián)。 原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻譯作者: https://github.com/chenmf6 翻譯出處：https://gi...
摘要：在中使用很簡單，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通過控制，但是又想避免內(nèi)聯(lián)的弊端，可以在里面使用。記得去掉換行它可以在上述的所有場景里面使用，除了內(nèi)聯(lián)。 原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier 翻譯作者: https://github.com/chenmf6 翻譯出處：https://gi...
摘要：結(jié)論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結(jié)論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標(biāo)的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導(dǎo)一下問題。 SVG vs I...
摘要：結(jié)論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結(jié)論選擇或許是一個不錯地選擇去替代的使用方式。 這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標(biāo)的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導(dǎo)一下問題。 SVG vs I...
閱讀 1313·2021-11-04 16:09
閱讀 3515·2021-10-19 11:45
閱讀 2408·2021-10-11 10:59
閱讀 1021·2021-09-23 11:21
閱讀 2774·2021-09-22 10:54
閱讀 1149·2019-08-30 15:53
閱讀 2617·2019-08-30 15:53
閱讀 3490·2019-08-30 12:57
