在React、Vue專案中如何使用SVG-js教程-PHP中文網

首頁

web前端

js教程

在React、Vue專案中如何使用SVG

亚连

Jun 06, 2018 pm 03:24 PM

react

本篇文章主要介紹了在 React、Vue專案中使用SVG的方法，現在分享給大家，也為大家做個參考。

在一些現代的扁平化設計網站，特別是行動端網站，經常包含許多簡單而清晰的小圖標，例如網站圖標、用戶的預設頭像、行動裝置網頁首頁底部固定的切換欄等，這些小圖示一般都是美工做好，可能會放到精靈圖上，前端再進行裁切展示。

而實際上，這些簡單的小圖示完全沒必要讓美工來做，前端完全可以透過svg使用程式碼把這些簡單的圖示畫出來，並且，因為這些圖標是用程式碼描述出來的，所以如果想要修改這些圖標，例如改變圖標的顏色、圖標的形狀、大小等，都只是改變幾行程式碼的事情，非常簡單，根本不需要美工返工重做。

本文不是闡述如何利用 svg 來進行畫圖的，不了解 svg的可以前往這裡查看，本文主要說一下如何在網站中使用 svg。

SVG在一般網頁中的使用

svg使用XML 格式定義圖片，你也可以把它看做是一般的HTML標籤，鑲嵌在網頁中呈現出某種效果，在網頁中使用svg的基本範例如下：

<body>
  <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
  </svg></body>

登入後複製

效果如下：

可以看到，在普通網頁中使用svg是很簡單的，只要你能把svg圖示畫出來，在網頁中的呈現完全不是問題。

在Vue中使用Svg

你完全可以像在普通網頁中使用svg那樣在Vue中使用，不過，既然已經是選擇vue來組件化開發項目了，那麼在一堆組件中，穿插一大段的svg畢竟有點不太好看。

一種解決方法是，利用svg的use標籤，不直接在主頁面中編寫繪製svg圖示的程式碼，而是把這一大段的程式碼放到另外的檔案中，然後使用use引用這段繪製圖示的程式碼即可（好像餓了麼移動端就是這麼乾的）。

例如，將所有繪製svg的程式碼放到svg-icon.vue檔案中，所有圖示的繪製程式碼使用symbol標籤分隔開並單獨命名，避免錯亂，然後將這個檔案當作一個元件匯出，在主頁面中引入此元件，接著，在需要使用svg圖示的地方，透過use標籤將其引入。

svg-draw.vue程式碼範例如下：

<template>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  style={{position:&#39;absolute&#39;,width:0,height:0}}>
  <defs>
   <symbol viewBox="0 0 26 31" id="location">
    <path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
   </symbol>
  </defs>
 </svg></template>

登入後複製

整個vue元件匯出一個大的svg，此svg包含了許多小的圖標，類似於精靈圖，每個圖示使用symbol分隔，並單獨命名以方便引用。

使用範例如下：

// index.vue
...<svg class="location-icon">
 <use xlink:href="#location" rel="external nofollow" ></use></svg>...

登入後複製

然後，就可以看到網頁中順利出現對應的svg圖示了：

不過，還有個問題，如果目前網站需要用到的svg圖標很多，勢必就造成svg-icon.vue這個文件體積逐漸變大，當前網頁命名只需要用到其中一個svg圖標，結果你把幾百個圖標的svg程式碼，全部加載了進來，明顯不太友好，最好是能夠按需加載，當前網頁需要哪些圖標就加載哪些，甚至一些可能出現可能不出現的圖標，也在該出現時再加載，如果沒有機會出現，那麼永遠不加載。

Github上有很多這類的插件，我介紹一個我覺得很好用的插件：vue-svg-icon，簡單易用、快速上手。

首先，安裝此插件，就不多說了，安裝完成後，在專案的入口檔案中註冊此外掛程式以方便全域呼叫：

import Icon from &#39;vue-svg-icon/Icon.vue&#39;Vue.component(&#39;icon&#39;, Icon)

登入後複製

然後在根目錄的/src目錄下新建一個svg目錄（目前這個路徑只能是這樣，不可配置為其他路徑和目錄），然後再這個目錄中放入你想要使用的svg圖示的svg檔案即可。

例如一個微信圖示的svg如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<defs>
<style type="text/css"></style>
</defs>
<path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887">
</path>
</svg>

登入後複製

將上述程式碼儲存到一個.svg的檔案中，例如wx.svg，放到/src/svg目錄中，這樣就完成了準備工作。

接著，想要使用的話，很簡單，直接在vue元件中這麼寫：

<template>
  <icon class="wx-icon" name="wx"></icon></template>

登入後複製

刷新頁面時，打開控制台，可以看到頁面中載入了這個wx.svg文件，這樣，就實現了svg文件的按需引入。

在React中使用Svg

在React中使用Svg和vue一樣，同樣存在3種方案，一種是直接在react的reader方法中寫入svg程式碼，第二種則是將所有svg繪製程式碼放到一個檔案中，然後將這個檔案一次載入，使用use標籤引用回應的svg圖案，第三種則是使用外掛程式按需引入。

第一种直接在渲染方法中写入 svg的方法就不多说了，第二种也很简单，和 vue一样，只不过写法上需要注意一下。

render() {
  return (
   <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{position:&#39;absolute&#39;,width:0,height:0}}>
    <defs>
     <symbol viewBox="0 0 26 31" id="location">
      <path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
     </symbol>
     <symbol viewBox="0 0 14 8" id="arrow">
      <path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
     </symbol>
    </svg>
   )
}

登入後複製

主要是需要注意，因为 react使用 jsx语法，不允许出现 - 连字符，所以像 fill-rule这样的属性，就必须写成 fillRule，引用的时候同样如此。

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref<svg className="arrow-left">
  <use xlinkhref="#arrow-left" rel="external nofollow" ></use>
 </svg>

登入後複製

第三种按需引入，只加载当前需要的 svg形状，同样是将每一个 svg图片作为一个单独的文件保存，然后再需要使用的地方进行引用。 Github上有个项目 react-svg，这个项目内部其实是对 SVGInjector的包装，

安装 react-svg之后，就可以像下面这样使用了：

import ReactSVG from &#39;react-svg&#39;

ReactDOM.render(
 <ReactSVG
  path="atomic.svg"
  callback={svg => console.log(svg)}
  className="example"
 />,
 document.querySelector(&#39;.Root&#39;)
)

登入後複製

一般都只是在使用小图标的时候才考虑 svg，而这些小图标一般都比较简约，绘制起来也没什么难度，不过大部分情况下没有必要自己来画，很多网站都提供svg的图标下载，例如阿里的 iconfont，图标数量众多，基本可以满足绝大部分的需求，另外，类似的网站还有 easyicon 、 icomoon等。

上面是我整理给大家的，希望今后会对大家有帮助。

有关在Vue中使用Compass的具体方法？

如何关闭Vue计算属性自带的缓存功能，具体步骤有哪些？

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

以上是在React、Vue專案中如何使用SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何利用React和WebSocket建立即時聊天應用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket建立即時聊天應用程式引言：隨著網路的快速發展，即時通訊越來越受到人們的關注。即時聊天應用程式已成為現代社交和工作生活中不可或缺的一部分。本文將介紹如何利用React和WebSocket建立一個簡單的即時聊天應用，並提供具體的程式碼範例。一、技術準備在開始建立即時聊天應用之前，我們需要準備以下技術和工具：React：一個用於構建

React前後端分離指南：如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南：如何實現前後端的解耦和獨立部署，需要具體程式碼範例在當今的Web開發環境中，前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開，可以讓開發工作更加靈活、高效，並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離，從而實現解耦和獨立部署的目標。首先，我們要先理解什麼是前後端分離。傳統的Web開發模式中，前端和後端是耦合在

如何利用React和Flask建構簡單易用的網路應用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask建構簡單易用的網路應用引言：隨著網路的發展，網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求，使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架，它們可以很好的結合在一起，用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask

React響應式設計指南：如何實現自適應的前端佈局效果 Sep 26, 2023 am 11:34 AM

React響應式設計指南：如何實現自適應的前端佈局效果隨著行動裝置的普及和使用者對多螢幕體驗的需求增加，響應式設計成為了現代前端開發的重要考量之一。而React作為目前最受歡迎的前端框架之一，提供了豐富的工具和元件，能夠幫助開發人員實現自適應的佈局效果。本文將分享一些關於使用React實現響應式設計的指南和技巧，並提供具體的程式碼範例供參考。使用React的Fle

如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：

React程式碼偵錯指南：如何快速定位與解決前端bug Sep 26, 2023 pm 02:25 PM

React程式碼偵錯指南：如何快速定位並解決前端bug引言：在開發React應用程式時，經常會遇到各種各樣的bug，這些bug可能會使應用程式崩潰或導致不正確的行為。因此，掌握調試技巧是每個React開發者必備的能力。本文將介紹一些定位和解決前端bug的實用技巧，並提供具體的程式碼範例，幫助讀者快速定位和解決React應用程式中的bug。一、調試工具的選擇：在Re

React Router使用指南：如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要

如何利用React和Google BigQuery建立快速的資料分析應用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery建立快速的資料分析應用引言：在當今資訊爆炸的時代，資料分析已經成為了各產業中不可或缺的環節。而其中，建構快速、有效率的資料分析應用則成為了許多企業和個人追求的目標。本文將介紹如何利用React和GoogleBigQuery結合來建立快速的資料分析應用，並提供詳細的程式碼範例。一、概述React是用來構建

See all articles

在React、Vue專案中如何使用SVG

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題