SVG가 올바르게 표시되지 않음

debugcn 에 게시 Dev

일상 앱

바이올린을 참조하십시오 : http://jsfiddle.net/t3t5ajwL/5/ . 두 개의 SVG 심볼이 나란히 있습니다. 어떤 이유로 둘 사이에 작은 "_"가 나타납니다. 누군가 무슨 일이 일어나고 있는지 설명 할 수 있습니까? 각 기호는 그 자체로 잘 표시됩니다. 이 문제는 둘 다 동시에 표시 될 때 발생합니다. 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>

킹 킹

그 밑줄은 a요소 로 인해 발생합니다 . 내부 인라인 블록 콘텐츠는 일반적으로 공백 (줄 바꿈으로 렌더링 됨)을 제공하며이 공백에는 밑줄이 표시됩니다. 요소 설정 text-decoration:none을 시도 할 수 있습니다 a.

a {
  text-decoration:none;
}

업데이트 된 데모 .

또 다른 수정은 태그 </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>

데모 2 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사