html - 按钮标签内对象标签的大小

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" ?>

这是使用google搜索svg css时的第一个链接

编辑:

How to apply a style to an embedded SVG?

“简短的回答:不，因为样式不适用于跨文档边界。

但是，由于您有一个标签，您可以使用脚本将样式表插入到 svg 文档中。”

有关说明，请参阅链接。

这是使用google搜索html css object svg时的第一个链接