Question

请参阅小提琴：http://jsfiddle.net/t3t5ajwL/5/。只有两个SVG符号并排。由于某种原因，一个小＆＃34; _＆＃34;出现在两者之间。有人可以解释发生了什么吗？每个符号本身都很好。当两者同时显示时会出现问题。在Chrome上进行测试。以下代码直接从jsfiddle复制：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>      
  <script type='text/javascript' src='/js/lib/dummy.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .icon {
    display:inline-block;
    width:16px;
    height:16px;
}
  </style>   

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){

}//]]>  

</script>

</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="icon-home" viewBox="0 0 16 16">
        <path d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"></path>
    </symbol>
    <symbol id="icon-android" viewBox="0 0 16 16">
        <path d="M13.5 5c-0.55 0-1 0.45-1 1v4c0 0.55 0.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1zM1.5 5c-0.55 0-1 0.45-1 1v4c0 0.55 0.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1zM3 11.5c0 0.828 0.672 1.5 1.5 1.5h0.5v2c0 0.55 0.45 1 1 1s1-0.45 1-1v-2h1v2c0 0.55 0.45 1 1 1s1-0.45 1-1v-2h0.5c0.828 0 1.5-0.672 1.5-1.5v-5.5h-9v5.5zM9.353 1.398l0.633-1.216c0.032-0.061 0.008-0.137-0.053-0.169s-0.137-0.008-0.169 0.053l-0.642 1.234c-0.503-0.195-1.050-0.301-1.622-0.301s-1.119 0.107-1.622 0.301l-0.642-1.234c-0.032-0.061-0.108-0.085-0.169-0.053s-0.085 0.108-0.053 0.169l0.633 1.216c-1.416 0.641-2.441 1.994-2.619 3.602h8.944c-0.178-1.608-1.203-2.961-2.619-3.602zM5.5 4.225c-0.4 0-0.725-0.325-0.725-0.725s0.325-0.725 0.725-0.725 0.725 0.325 0.725 0.725c-0 0.4-0.325 0.725-0.725 0.725zM9.5 4.225c-0.4 0-0.725-0.325-0.725-0.725s0.325-0.725 0.725-0.725 0.725 0.325 0.725 0.725c0 0.4-0.325 0.725-0.725 0.725z"></path>
    </symbol>
</svg>
<div class="home-icon" title="Home">
   <a href="/">
            <svg class="icon icon-home" viewBox="0 0 16 16">
                <use xlink:href="#icon-home"></use>
            </svg>
    </a>
    <a href="/">
            <svg class="icon icon-android" viewBox="0 0 16 16">
                <use xlink:href="#icon-android"></use>
            </svg>
    </a>
</div>      
</body> 

</html>

Answer 1

下划线是由a元素引起的。内部内联块内容通常给出一个空格（由换行符渲染），并且该空格带有下划线。您可以尝试为text-decoration:none元素设置a：

a {
  text-decoration:none;
}

Updated demo

另一个解决方法是在</a>标记后面写下结束标记</svg>。这样就不会有任何换行符，并且不会渲染空格和下划线：

<a href="/">
        <svg class="icon icon-home" viewBox="0 0 16 16">
            <use xlink:href="#icon-home"></use>
        </svg></a>
<a href="/">
        <svg class="icon icon-android" viewBox="0 0 16 16">
            <use xlink:href="#icon-android"></use>
        </svg></a>

SVG无法正确显示

1 个答案:

Updated demo

Demo 2