使用svg圖像作爲按鈕 - 但不包括他們在HTML中直接

我有幾個按鈕圖像，保存爲svgs。我現在想用這些圖像作爲我的html網站上的按鈕。但是，我不知道如何做到這一點。使用svg圖像作爲按鈕 - 但不包括他們在HTML中直接

圖像相當複雜，所以我不希望它們在實際的HTML文件中，而是從一個單獨的文件中導入它們（我的意思是，我希望它們可以另存爲.svg文件）。第二個問題（我不知道它是否有問題）是按鈕是圓的。

我想過通過在css中包含按鈕作爲背景圖像來解決這個問題，或者我認爲給出一個onclick方法的標準圖像，但肯定最後一種方法太複雜了，並且使它們看起來似乎也是背景圖像對我來說非常直觀。我只是寫這個來表明我已經想過這個，但不知道。

這裏是我想出迄今：

<div class="sw-buttons"> 
       <button id="sw-button-1" /> 
       </button> 

       <button id="sw-button-2" /> 
       </button> 
       ...(more buttons here) 
      </div>

我發現this，但這裏的SVG是直接在HTML包括在內。

來源

2016-12-06 George Welder

爲什麼不在「

使用外部SVG文件 - 請參閱此[文章]（https://www.sitepoint.com/use-svg-image-sprites/） –

將它們設置爲css背景圖像是否正常？我會認爲這是不好的做法。 –

可以包括<button>...</button>元素中的外部SVG作爲<img />的src：

button, button img { 
 
width: 100px; 
 
height: 100px; 
 
border-radius: 100px; 
 
} 
 

 
button { 
 
position: relative; 
 
background-color: rgb(255,255,255); 
 
} 
 

 
button img { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
background-color: rgb(0,0,0); 
 
}

<button type="button"> 
 
<img src="/my-svg-button.svg" /> 
 
</button>

來源

2016-12-06 23:18:53 Rounin

你可以將它們存儲在服務器上，並使用代碼訪問它們：

#sw-button-1: 
    background: url(put_the_link_to_your_image_here) no-repeat left top; 
    height: auto; 
    width: auto; 

    #sw-button-2: 
    background: url(put_the_link_to_your_image_here) no-repeat left top; 
    height: auto; 
    width: auto;

您可以相應地調整按鈕的高度和寬度。

來源

2016-12-06 23:34:23 Joseph

使用svg圖像作爲按鈕 - 但不包括他們在HTML中直接

回答

相關問題