2. 程式人生 > >使用CSS來設定SVG中Use元素的樣式

使用CSS來設定SVG中Use元素的樣式

阿新 • • 發佈：2019-01-28

轉自：http://blog.csdn.net/xiaozhu2hao/article/details/47443031

參考：

用CSS給SVG <use>的內容新增樣式

http://www.w3cplus.com/svg/styling-svg-use-content-css.html

今天看到技術群中有人問svg中use元素可以設定樣式屬性不？因為他的symbol有200多種，但是隻是顏色不一樣。如果挨個定義，那svg檔案就會很長。自己也思考過這個問題後來看到http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/這篇文章，收益匪淺。這篇文章講的比較詳細。就不在解釋原理了。直接上自己測試例子的程式碼，比較直觀。

      1 單純的svg檔案，將style直接寫在<svg>標籤元素下

  1. <svgxmlns="http://www.w3.org/2000/svg"style="display: none;"xmlns:xlink="http://www.w3.org/1999/xlink"width="2000"height="2000">
  2.    <styletype="text/css">
  3.      svg path {  
  4.           fill: inherit;  
  5.      }   
  6.      .codrops-1 {  
  7.         fill: #4BC0A5;  
  8.         color: #A4DFD1;  
  9.       }  
  10.     .codrops-2 {  
  11.       fill: #0099CC;  
  12.        color: #7FCBE5;  
  13.     }  
  14.     .codrops-3 {  
  15.        fill: #5F5EC0;  
  16.        color: #AEAFDD;  
  17.     }  
  18.   </style>
  19.   <def>
  20.     <symbolid="codrops"viewBox="0 0 23 30">
  21.         <pathclass="back"fill="#aaa"d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"
    />
  22.         <pathclass="front"fill="#ddd"d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>
  23.     </symbol>
  24.   </def>
  25.   <usex="0"y="0"width="100"height="100"xlink:href="#codrops"class="codrops-1"/>
  26.   <usex="100"y="0"width="100"height="100"xlink:href="#codrops"class="codrops-2"/>
  27.   <usex="200"y="0"width="100"height="100"xlink:href="#codrops"class="codrops-3"/>
  28. </svg>
     2  如果用在Html中如下
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.        <styletype="text/css">
  5.         svg path {  
  6.            fill: inherit;  
  7.         }   
  8.         use.codrops-1 {  
  9.           fill: #4BC0A5;  
  10.           color: #A4DFD1;  
  11.         }  
  12.         use.codrops-2 {  
  13.          fill: #0099CC;  
  14.          color: #7FCBE5;  
  15.         }  
  16.         use.codrops-3 {  
  17.           fill: #5F5EC0;  
  18.           color: #AEAFDD;  
  19.         }  
  20.       </style>
  21.    </head>
  22.    <body>
  23.        <divstyle="width:1000px;height:1000px;border:2px solid #F00;overflow-y:scroll;">
  24.         <svgstyle="display: none;">
  25.           <symbolid="codrops"viewBox="0 0 23 30">
  26.              <pathclass="back"fill="#aaa"d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>
  27.              <pathclass="front"fill="#ddd"d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>
  28.           </symbol>
  29.         </svg>
  30.         <svgheight="90px"width="69px">
  31.             <usexlink:href="#codrops"class="codrops-1"/>
  32.         </svg>
  33.         <svgheight="90px"width="69px">
  34.             <usexlink:href="#codrops"class="codrops-2"/>
  35.         </svg>
  36.         <svgheight="90px"width="69px">
  37.             <usexlink:href="#codrops"class="codrops-3"/>
  38.         </svg>
  39.         </div>
  40.     </body>
  41. </html>

效果如下圖


相關推薦

使用CSS來設定SVG中Use元素的樣式

轉自：http://blog.csdn.net/xiaozhu2hao/article/details/47443031 參考： 用CSS給SVG <use>的內容新增樣式 http://www.w3cplus.com/svg/styling-svg-use-c

svg中use元素引用symbol樣式的思考

對於use元素當引用的symbol當只有填充色或線色變化時可以通過給use元素新增class來減少程式碼量。直接上程式碼 <!DOCTYPE html> <html> <head> <style t

html網頁好看字體，css設置各種中文字體樣式

stx 網頁 stl msu font p s 引號 style htm 網頁字體樣式華文黑體：STHeiti網頁字體樣式華文楷體：STKaiti網頁字體樣式華文宋體：STSong網頁字體樣式華文仿宋：STFangsong網頁字體樣式黑體：SimHei網頁字體樣式宋體：Si

設定input中placeholder的樣式（placeholder設定字型）

方法： 程式碼示例： 1 .input::-webkit-input-placeholder { 2 font-size: 3.73333333vw; 3 color: #cccccc; 4 } 5 .input:-moz-placeholder { 6 font-size:

設定input 中placeholder的樣式

一、效果 二、程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

html通過css來設定半透明背景

Html/Css標籤透明度效果的實現,在html中，實現半透明背景，在HTML Div+Css程式設計中，為了實現版透明，通常有3中做法。 第一種是HTML5的透明，在H5中支援透明背景顏色，但遺憾的是，H5中的辦透明背景顏色只支援 rgba的寫法，不支援16進位制的

svg中實現元素拖動

這段時間比較忙，php的設計模式想寫工廠模式，但是比較難寫，不是一時半會兒能寫完的，先把現在正在使用的關於svg中元素的拖動，記錄一下。 藉助svg，我們可以畫出多種多樣的圖形，而且利用g標籤，還可以把多個標籤組合在一起，讓他們具有相同的行為。語法也比較簡

css:hover狀態改變另一個元素樣式的使用

情景1： ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css :hover偽類改變其他元素樣式

html部分： <div>我喜歡</div> <ul> <li>shiziwang</li> <li>saonan</li> <li>xinba</li>

vue中如何使用v-if,v-else來設定css樣式

        我們在使用vue專案開發時，v-if是使用的非常多的，在這裡我們談談如何使用v-i來繫結修改css樣式，使用的主要是雙向資料繫結，即通過改變他的狀態來改變他的樣式，來個例項說明下：第一步：        主要使用的是三元判斷的方式（需要改變的div裡使用），並

如何利用CSS給同一個網頁中的超連結設定設定不同的樣式？

用css中的類。比如<style type="text/css"> a.topcs:link { font-size: 12px; color: #000000; text-decoration: none; } a.topcs:visited { font-size: 12px; color:

關於css中父元素與子元素之間margin-top的問題

可用 技術分享 一個 src 文檔流 重疊 cond one left 之前在使用經常遇到下面的問題： html： 1 <div class="top"> 2 <div class="one">I‘m the first!</div&

css中background合寫樣式

color chm ffffff rep position osi style over bsp body { 　　background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; }等價於 bo

淺談css中一個元素如何在其父元素居中顯示

image 絕對定位 自己 兼容性 面試 mar 浮動 垂直居中 圖片 css如何垂直居中一個元素的問題已經是一個老生常談的問題了。不管對於一個新手或者老手，在面試過程中是經常被問到的。前兩天在看一個flex的視頻教程，當中提到了有關元素的居中問題，所以今天小編就來扒一扒幾

算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。 隊列中的元素為int類型。《劍指offer》

pack 代碼 exception 隊列 imp scrip 入棧 return tro 算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。 隊列中的元素為int類型。《劍指offer》 利用棧來進行操作，代碼註釋寫的比較清楚：首先判斷兩個棧是否是空的：

Vue.js-04：第四章 - 頁面元素樣式的設定

 一、前言 　　前端開發中有三大件：HTML、CSS、JavaScript，在前面的學習中，不管是學習 Vue 的指令系統還是 Vue 的事件修飾符，主要還是針對的是我們在前端開發中的 JavaScript 這一塊，而在實際的開發中必定會需要涉及到對於頁面佈局的設計。即使你採用的是使用第三方的 U

javafx中常用的樣式設定！！！

最近在學習java的時候常要用javafx寫一些小的桌面程式，javafx中引入的樣式特性可以說是非常棒了！奈何經常不知道該用什麼樣式來設定自己想要的，碰巧在一個地方看到一些設定文字框(TextField)的樣式的方法，現分享如下，當然其他的控制元件以此類推，設定方法大同小異：

通過屬性來設定樣式

/**一般我們都是通過標籤或則類名，id名來設定樣式，很少會用屬性，那麼讓大家看看用屬性來設定得方便的地方， form表單中經常用的就是input  button 了，那麼這會兒我們就可以用這個來通過屬性給他改變樣式了， */ /**效果圖 */ <!DOCTYPE

SVG g defs symbol use元素使用詳解

SVG 意為可縮放向量圖形（Scalable Vector Graphics），SVG 使用 XML 格式定義影象。 g表示分組元素，將多個元素 設定為組，實現多個元素如：平移、旋轉之類的整體操作； defs實現元素定義，定義的元素不直接顯示在畫板上，通過use重用desf、g、symbol

前端知識點之樣式中的元素浮動

浮動：float; 定義：使元素脫離文件流，按照指定的方向發生移動，遇到父級的邊界或者相鄰的浮動元素就會停下來； 浮動元素是同時處於常規流內和常規流的元素，其中塊級元素認為浮動元素不存在，而浮動元素會影響行內元素的佈局； 因此浮動元素通過影響行內元素的佈局來間接影響包含塊的佈局；