調整按鈕標記內的對象標記大小

Question

我有3個社交按鈕位於此聲音播放器的底部。我似乎無法讓SVG（在<object>之內）調整對象和按鈕的大小以適合SVG。我真的不想破解它，並用填充，邊距等來抵消。

感謝您的幫助！

/* Fonts */ 
 
@import url("../fonts/nivo/stylesheet.css"); 
 

 

 
body { 
 
    background: #F5F4EF url('../images/smbg.png'); 
 
} 
 

 
/* Media container */ 
 
#outer_container { 
 
    background: #fff; 
 
    padding: 12px 14px 12px 14px; 
 
    border-radius: 5px; 
 
} 
 

 
#inner_container { 
 
    background: #fff; 
 
    border: 1px solid #eee; 
 
    box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.5); 
 
    display: table; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.start { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 8%; 
 
    border-right: 1px solid rgba(162, 162, 162, .5); 
 
} 
 

 
.player { 
 
    width: 100%; 
 
    margin-left: 2px; 
 
} 
 

 
button { 
 
    color: #000; 
 
    background-color: #fff; 
 
    border-color: #eee; 
 
    display: inline-block; 
 
    margin-bottom: 5px; 
 
    width: 70px; 
 
    height: 30px; 
 
    cursor: default; 
 
    border: none; 
 
    text-decoration: none; 
 
    appearance: none; 
 
    outline: none; 
 
} 
 

 
#media-title { 
 
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif; 
 
    letter-spacing: 1px; 
 
    color: #414042; 
 
    width: 100%; 
 
    display: block; 
 
    vertical-align: middle; 
 
    padding-bottom: 5px; 
 
    padding-top: 5px; 
 
    position: relative; 
 
} 
 

 

 
.empty_space { 
 
    float: left; 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 2px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
a.sound_name { 
 
    color: #888888; 
 
    text-decoration: none; 
 
    font-weight: 200; 
 
    &:hover { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    } 
 
} 
 

 
#media-type { 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
object { 
 
    
 
} 
 

 
.object_social { 
 
    display: inline; 
 
    position: relative; 
 
    left: 0; 
 
    
 
}

   <div id="inner_container"> 
 
        
 
        <!-- Play button --> 
 
        <div class="start"> 
 
         <object class="play_button" id="play" type="image/svg+xml" data="images/play_button.svg"> 
 
          Play 
 
         </object> 
 
        </div> 
 
        
 
        <!-- Waveform and Assorted Content --> 
 
        <div class="player"> 
 
         
 
         <!-- empty padding space --> 
 
         <div class="empty_space">&nbsp</div> 
 
         
 
         <div id="media-title"> 
 
          <a class="sound_name" href="#">Collection Name</a> - <strong>Kick Loop 1</strong> 
 
         
 
         
 
         <div id="media-type"> 
 
          <object class="sound_type" type="image/svg+xml" data="images/SoundType/loop.svg"> 
 
          </object> 
 
         </div> 
 
</div> 
 
         <div id="waveform"> 
 
          
 
          <!-- empty padding space --> 
 
          <div class="empty_space">&nbsp</div> 
 
          
 
          <div class="progress progress-striped active" id="progress-bar"> 
 
           <div class="progress-bar progress-bar-info"></div> 
 
          </div> 
 
         
 
          <!-- Here be the waveform --> 
 
         </div> 
 
         
 
         <div class="button_social"> 
 
          
 
          <!-- empty padding space --> 
 
          <div class="empty_space">&nbsp</div> 
 
          
 
          <button> 
 
           <object class="object_social" type="image/svg+xml" data="images/like_button.svg"> 
 
           </object> 
 
          </button> 
 

 
          <button> 
 
           <object class="object_social" type="image/svg+xml" data="images/bucket_button.svg"> 
 
           </object> 
 
          </button> 
 

 
          <button> 
 
           <object class="object_social" type="image/svg+xml" data="images/share_button.svg"> 
 
           </object> 
 
          </button> 
 
          
 
         </div> 
 
        </div> 
 
        <!-- End Waveform and Assorted Content --> 
 
        
 
       </div>

Answer 1

Using SVG with CSS

「你不能用一個外部的樣式表或文檔，你需要使用一個元素的SVG文件本身裏面。」

<svg ...> 
    <style> 
    /* SVG specific fancy CSS styling here */ 
    </style> 
    ... 
</svg> 

「SVG有一個方法來聲明一個外部的樣式表，這對於創作和緩存和諸如此類的東西不錯，這僅適用於SVG的嵌入據我測試過的文件。你需要把它放在開頭標籤上方的SVG文件中。「

<?xml-stylesheet type="text/css" href="svg.css" ?> 

這是第一個鏈接使用谷歌搜索時svg css

編輯：

How to apply a style to an embedded SVG?

「簡短的回答：沒有，因爲款式不跨文檔應用邊界

但是，由於您有一個標籤可以插入使用腳本將樣式表導入到svg文檔中。「

查看鏈接的說明。

這使用谷歌搜索html css object svg

Answer 2

確保您SVGs有width和height當是第一聯接。只要您的SVG具有明確的大小，<object>應調整大小以適應它，<button>應調整大小以適合<object>。

例如，下面的作品對我蠻好：

SVG（icon.svg）

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32"> 
    <circle cx="16" cy="16" r="16" fill="lime"/> 
</svg> 

HTML

<html> 
<body> 

    <button> 
    <object type="image/svg+xml" data="icon.svg"></object> 
    </button> 

</body> 
</html>