欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么用SVG給favicon添加標(biāo)識(shí)

這篇文章主要介紹“怎么用SVG給favicon添加標(biāo)識(shí)”，在日常操作中，相信很多人在怎么用SVG給favicon添加標(biāo)識(shí)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用SVG給favicon添加標(biāo)識(shí)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、龍沙網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、favicon 的獲取方式

想知道獲取方式，可以先了解設(shè)置方式。

一般有兩種方式可以設(shè)置網(wǎng)站的 favicon。

第一種，通過(guò) link 標(biāo)簽設(shè)置（需要rel="icon"屬性）

<link rel="icon" href="xxx.png">

第二種，直接在網(wǎng)站根目錄放一張favicon.ico（必須是這個(gè)名稱(chēng)，瀏覽器默認(rèn)的），html 中什么也不用設(shè)置

- 網(wǎng)站目錄
    index.html
    favicon.ico

如果以上都沒(méi)有設(shè)置，那么大概率會(huì)看到以下錯(cuò)誤

怎么用SVG給favicon添加標(biāo)識(shí)

了解這些，獲取就簡(jiǎn)單了，先通過(guò)link獲取，只要rel包含icon就行了

const link = document.querySelector('link[rel~="icon"]');

如果找不到，可以請(qǐng)求/favicon.ico，這里直接添加一個(gè)link

function getLink(){
    const link = document.querySelector('link[rel~="icon"]');
    if (link) {
        return link
    } else {
        const link = document.createElement('link');
        link.rel = "icon";
        link.href = "/favicon.ico"
        document.head.append(link);
        return link
    }
}

這樣獲取的link就保證存在了，然后就是繪制

二、利用 canvas 進(jìn)行繪制

由于需要合成圖像，所以需要先繪制原有圖像。提到圖像繪制，可以想到 canvas 繪制，只需要一點(diǎn)點(diǎn) canvas 基礎(chǔ)知識(shí)就足夠了。具體實(shí)現(xiàn)如下

const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    let dataURL = canvas.toDataURL("image/png");
    resolve(dataURL);
    canvas = null;
};
img.src = url;

由于存在/favicon.ico沒(méi)有設(shè)置的情況，所以需要在 img 加載失敗的時(shí)候給一張默認(rèn)圖

img.onerror = () => {
    resolve("默認(rèn)圖base64");
}

這樣就能獲取到 favicon 的圖像信息了

三、利用 SVG 進(jìn)行圖片合成

在上面的基礎(chǔ)上，其實(shí)可以繼續(xù)通過(guò) canvas 進(jìn)行繪制，再繪制一個(gè)標(biāo)簽也不是難事。不過(guò)這里可以采用 SVG 的方式來(lái)進(jìn)行繪制，有以下一些優(yōu)點(diǎn)

  • 成本更低，比 canvas 更易理解

  • 靈活性高，可以通過(guò) CSS 進(jìn)行一些樣式控制

首先，我們可以在 HTML 中自由的、像正常網(wǎng)頁(yè)開(kāi)發(fā)一樣，繪制這樣一個(gè)布局，相信沒(méi)有什么難度

怎么用SVG給favicon添加標(biāo)識(shí)

<body>
  <strong>local</strong>
  <img src='xxx.png'>
</body>

由于寬度有限，所以需要強(qiáng)制文本換行，超出隱藏，關(guān)鍵樣式如下

strong{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  background-color: orange;
  color: #fff;
  padding: 0px 2px;
  border-radius: 2px;
  font-size: 12px;
  box-sizing: border-box;
  max-width: 100%;
  width: max-content;
  height: 16px;
  line-height: 16px;
  word-break: break-all;
  overflow: hidden;
}

接著，將這一段 html 放入 foreignObject標(biāo)簽中，關(guān)于  foreignObject 的作用，有興趣的可以參考張?chǎng)涡窭蠋煹倪@篇文章 SVG 簡(jiǎn)介與截圖等應(yīng)用，在這里，你可以簡(jiǎn)單理解為是可以包含 HTML 的標(biāo)簽，而 SVG 本身也是一種圖片，這樣就達(dá)到了合成圖像的目的

怎么用SVG給favicon添加標(biāo)識(shí)

具體實(shí)現(xiàn)如下

const link = getLink();
const icon = await img2Base64(link.href);
const favicon = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><foreignObject x="0" y="0" width="100%" height="100%"><body xmlns="http://www.w3.org/1999/xhtml">
  <style>
    html,body{
      height: 100%;
      margin: 0;
      text-align: center;
    }
    img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    strong{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-transform: uppercase;
      background-color: ${color};
      color: #fff;
      padding: 0px 2px;
      border-radius: 2px;
      font-size: 12px;
      box-sizing: border-box;
      max-width: 100%;
      width: max-content;
      height: 16px;
      line-height: 16px;
      word-break: break-all;
      overflow: hidden;
    }
  </style>
  <strong>local</strong>
  <img src='${icon}'></img>
  </body></foreignObject></svg>`.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')

這里需要注意幾點(diǎn)

  • img 標(biāo)簽在 svg 中需要寫(xiě)成<img></img>閉合形態(tài)，不然會(huì)被認(rèn)為結(jié)構(gòu)錯(cuò)誤

  • img 只能使用內(nèi)聯(lián)圖片，比如 base64，這也是為何繪制原始 favicon 的原因

  • 如果使用內(nèi)聯(lián) svg，需要對(duì) svg 進(jìn)行轉(zhuǎn)義

  • 字符串中的單雙引號(hào)問(wèn)題也需要注意一下

然后，將生成的 SVG 直接設(shè)置為 favicon

link.href= favicon;

怎么用SVG給favicon添加標(biāo)識(shí)

四、一些局限性

首先是兼容性。

目前只有 Chrome 和 Firefox 是支持的，為了兼容其他瀏覽器，可以用一個(gè) .ico來(lái)兜底

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

另外，在 Chrome 上還有一個(gè)限制（不知道是不是Chrome 更新后的限制），當(dāng) favicon 使用 svg 格式圖片時(shí)，此時(shí)的 svg 會(huì)處于一種secure-static-mode，在這種模式下，所有動(dòng)畫(huà)都不會(huì)執(zhí)行，會(huì)處于第一幀，比如下面這個(gè)例子

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <foreignObject width="100%" height="100%">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <style>
        html,body{
            margin: 0;
            height: 100%
        }
        div{
            height: 100%;
            background: pink;
            animation: hue 3s infinite;
        }
        @keyframes hue {
            to {
                filter: hue-rotate(360deg)
            }
        }
        </style>
        <div></div>
      </body>
    </foreignObject>
</svg>

很簡(jiǎn)單的一個(gè)背景顏色動(dòng)畫(huà)。在 Firefox 上是用作 favicon 是有動(dòng)畫(huà)的

怎么用SVG給favicon添加標(biāo)識(shí)

但是，Chrome 上卻不行，只有禁止的第一幀

怎么用SVG給favicon添加標(biāo)識(shí)

所以之前想實(shí)現(xiàn)標(biāo)識(shí)文本滾動(dòng)的效果可以就此打住了

比較類(lèi)似的還有媒體查詢(xún)，之前在網(wǎng)上看到有這樣的實(shí)現(xiàn)，直接在 SVG 中實(shí)現(xiàn)黑暗模式

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #fff;
        }
        rect {
            fill: #B09AFE;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #B09AFE;
            }
            rect {
                fill: #fff;
            }
        }
    </style>
    <rect width="128" height="128" rx="64" fill="#B09AFE"/>
    <path d="M32.375 37.5714H22C22 58.004 38.2596 74.5714 58.3125 74.5714V98.3571C58.3125 99.8107 59.4797 101 60.9062 101H66.0937C67.5203 101 68.6875 99.8107 68.6875 98.3571V74.5714C68.6875 54.1388 52.4279 37.5714 32.375 37.5714ZM94.625 27C80.9754 27 69.109 34.6808 62.9002 46.0286C67.3906 51.017 70.7139 57.079 72.4646 63.8018C90.7344 61.8692 105 46.1442 105 27H94.625Z" fill="white"/>
</svg>

但是也是同樣的問(wèn)題，只有 Firefox 下可行，Chrome是靜止不動(dòng)的

怎么用SVG給favicon添加標(biāo)識(shí)

到此，關(guān)于“怎么用SVG給favicon添加標(biāo)識(shí)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前名稱(chēng)：怎么用SVG給favicon添加標(biāo)識(shí)
瀏覽路徑：http://www.chinadenli.net/article8/igpcop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、App設(shè)計(jì)、商城網(wǎng)站、靜態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)