奇妙なSVG動作のトラブルシューティング

Question

スケッチで3つのsvgをhtmlに含める要素としてエクスポートしましたが、1つ（twitter）は完全に困惑しています。

すべての3つのsvgsはそのストロークの色として、3つのすべての使用＃999999を同じように作成し、ストローク幅を持たれた：2

しかし、Twitterのストロークは、それが必要以上に濃い色&大幅に細く見えます。質問

<li> 
    <a> 
     <svg width="26px" height="22px" viewBox="29 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
       <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> 
       <desc>Created with Sketch.</desc> 
       <defs> 
       <path d="M52.4856971,4.68997313 C51.7333146,5.02377149 50.9207961,5.24903418 50.0734261,5.34528278 C50.9419804,4.82581336 51.604159,4.00735892 51.9185059,3.02371183 C51.1053041,3.50836792 50.2032651,3.85650118 49.246557,4.04763316 C48.4811906,3.2284961 47.38781,2.71653543 46.1775743,2.71653543 C43.8555072,2.71653543 41.9762592,4.6.9762592,6.91461287 C41.9762592,7.24226769 42.0104274,7.56377899 42.0773969,7.87027277 C38.5867793,7.69961922 35.4843117,6.027897 33.4130388,3.4878895 C33.0508565,4.10906844 32.8458476,4.82581336 32.8458476,5.59785004 C32.8458476,7.05181833 33.5838795,8.33513305 34.7107449,9.09215222 C34.0205484,9.06484765 33.3788706,8.88054181 32.8116794,8.56653927 L32.8048458,8.62114841 C32.8048458,10.6491952 34.2604088,12.348222 36.1799751,12.730486 C35.8314601,12.8274172 35.4556105,12.8820264 35.0722439,12.8820264 C34.8002655,12.8820264 34.5399042,12.8547218 34.2795429,12.8069388 C34.820083,14.4725175 36.3720001,15.6868882 38.2088796,15.7223841 C36.7745009,16.848015 34.9560722,17.5176595 32.9886704,17.5176595 C32.646989,17.5176595 32.3121412,17.4964985 31.984127,17.454859 C33.8428741,18.6494339 36.0569698,19.346383 38.4275557,19.346383 C46.1707407,19.346383 50.4014403,12.9502878 50.4014403,7.40063419 C50.4014403,7.22383711 50.39324,7.03884866 50.3864063,6.86136896 C51.2078085,6.26612936 51.9185059,5.52890601 52.4856971,4.68997313 L52.4856971,4.68997313 Z" id="path-1"></path> 
       <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="24.5015702" height="20.6298476"> 
        <rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#999999"></rect> 
        <use xlink:href="#path-1" fill="black"></use> 
       </mask> 
       </defs> 
       <use id="Twitter" stroke="#999999" mask="url(#mask-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" xlink:href="#path-1"></use> 
      </svg> 
    </a> 
    </li> 

で

Link to Codepen Example

コードIは、SVGコードの上に何度も見てきたし、私がいる問題を引き起こす明白な何かを見つけることができませんでした。

ご提案/アドバイスをいただければ幸いです。

Answer 1

あなたの問題はあなたのTwitter SVGの奇妙な配置に起因しています。不要な<mask>要素を持つように見え、アイコンの「壁」をより薄く見せる効果があります。推測すると、それは塗りつぶしとして表示されるように設計されたアイコンであり、誰かがそれを修正してストロークと塗りつぶしを与えられていないと言いたい。

マスクを外してストローク幅を調整すると、アイコンは他のものと比べてはるかに良好です。

@media (max-width: 769px) { 
 
    #container-master { 
 
    display: none; 
 
    } 
 
} 
 

 
#container-master { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: 100px; 
 
    background-color: #000; 
 
    position: fixed; 
 
    z-index: -100; 
 
    bottom: 0px; 
 
    width: 100%; } 
 

 
#container { 
 
    display: flex; 
 
    margin: 0; } 
 

 
#container span { 
 
    color: #999999; 
 
    font-size: 2vw; 
 
} 
 
    @media (max-width: 850px) { 
 
    #container span { 
 
     font-size: 17px; 
 
    } 
 
} 
 
    @media (min-width: 1200px) { 
 
    #container span { 
 
     font-size: 24px; 
 
    } 
 
} 
 

 
* { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; } 
 

 
.cta-social { 
 
    flex: 1; 
 
    justify-content: center; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.cta-social li { 
 
    display: inline-block; 
 
} 
 

 
.cta-social > li:first-child { 
 
    margin-right: 35px; } 
 

 
.cta-social > li:last-child { 
 
    margin-left: 35px; } 
 

 
#container > li:first-child { 
 
    margin-left: 22px; 
 
    flex: 1; 
 
    justify-content: flex-start; 
 
    display: flex; 
 
    align-items: center; } 
 

 
#container > li:last-child { 
 
    margin-right: 30px; 
 
    flex: 1; 
 
    justify-content: flex-end; 
 
    display: flex; 
 
    align-items: center; } 
 

 
.cta-last-li { 
 
    transform: translate3d(0, -11px, 0); } 
 

 
.cta-last-li svg { 
 
    transform: translate3d(0, 11px, 0); } 
 

 
.cta-last-li span { 
 
    transform: translate3d(0, 7px, 0); 
 
    display: inline-block; }

<div id="container-master"> 
 
    <ul id="container"> 
 
    <li> 
 
     <a href="#"> 
 
     <span>©&nbsp;Boberson&amp;Sons.</span> 
 
     </a> 
 
    </li> 
 
    <ul class="cta-social"> 
 
     <li> 
 
     <a> 
 
      <svg width="13px" height="auto" viewBox="-2 -1 13 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
        <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> 
 
        <desc>Created with Sketch.</desc> 
 
        <defs></defs> 
 
        <g id="Facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
        <path d="M9.1524685,0.477435398 C9.1524685,0.477435398 7.96904567,5.75242739e-14 6.69657162,2.84217094e-14 C5.42409757,-8.29900652e-16 3.14797652,0.193046611 3.14797623,2.54258452 C3.14797595,4.89212243 3.14797623,20.9876873 3.14797623,20.9876873" id="Path-26" stroke="#999999" stroke-width="2"></path> 
 
        <path d="M-2.25597319e-13,7.29773304 L8.24446303,7.29773304" id="Line" stroke="#999999" stroke-width="2" stroke-linecap="square"></path> 
 
        </g> 
 
       </svg> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a> 
 
      <svg width="26px" height="22px" viewBox="29 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
        <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> 
 
        <desc>Created with Sketch.</desc> 
 
        <path d="M52.4856971,4.68997313 C51.7333146,5.02377149 50.9207961,5.24903418 50.0734261,5.34528278 C50.9419804,4.82581336 51.604159,4.00735892 51.9185059,3.02371183 C51.1053041,3.50836792 50.2032651,3.85650118 49.246557,4.04763316 C48.4811906,3.2284961 47.38781,2.71653543 46.1775743,2.71653543 C43.8555072,2.71653543 41.9762592,4.6.9762592,6.91461287 C41.9762592,7.24226769 42.0104274,7.56377899 42.0773969,7.87027277 C38.5867793,7.69961922 35.4843117,6.027897 33.4130388,3.4878895 C33.0508565,4.10906844 32.8458476,4.82581336 32.8458476,5.59785004 C32.8458476,7.05181833 33.5838795,8.33513305 34.7107449,9.09215222 C34.0205484,9.06484765 33.3788706,8.88054181 32.8116794,8.56653927 L32.8048458,8.62114841 C32.8048458,10.6491952 34.2604088,12.348222 36.1799751,12.730486 C35.8314601,12.8274172 35.4556105,12.8820264 35.0722439,12.8820264 C34.8002655,12.8820264 34.5399042,12.8547218 34.2795429,12.8069388 C34.820083,14.4725175 36.3720001,15.6868882 38.2088796,15.7223841 C36.7745009,16.848015 34.9560722,17.5176595 32.9886704,17.5176595 C32.646989,17.5176595 32.3121412,17.4964985 31.984127,17.454859 C33.8428741,18.6494339 36.0569698,19.346383 38.4275557,19.346383 C46.1707407,19.346383 50.4014403,12.9502878 50.4014403,7.40063419 C50.4014403,7.22383711 50.39324,7.03884866 50.3864063,6.86136896 C51.2078085,6.26612936 51.9185059,5.52890601 52.4856971,4.68997313 L52.4856971,4.68997313 Z" stroke="#999999" stroke-width="1.5" stroke-linejoin="round" fill="none"/> 
 
       </svg> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a> 
 
      <svg width="24px" height="24px" viewBox="73 -1 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
        <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> 
 
        <desc>Created with Sketch.</desc> 
 
        <defs></defs> 
 
        <g id="Instagram" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(74.007937, 0.905512)"> 
 
        <path d="M17.7680275,0 L4.10031403,0 C1.93825261,0 0,1.56153207 0,3.41318485 L0,17.0659243 C0,18.9431759 1.93825261,20.4791091 4.10031403,20.4791091 L17.7680275,20.4791091 C19.3312722,20.4791091 20.5015702,18.9431759 20.5015702,17.0659243 L20.5015702,3.41318485 C20.5015702,1.56153207 19.3312722,0 17.7680275,0 L17.7680275,0 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
 
        <path d="M14.6439787,9.90198683 C14.6439787,12.6611242 12.683184,14.6279351 10.5887231,14.6279351 C7.82737689,14.6279351 5.85759148,12.6611242 5.85759148,9.90198683 C5.85759148,7.81961784 7.82737689,5.85117404 10.5887231,5.85117404 C12.683184,5.85199048 14.6439787,7.81961784 14.6439787,9.90198683 L14.6439787,9.90198683 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
 
        <path d="M17.5727744,4.14458161 C17.5727744,4.29086096 17.4751479,4.38838053 17.3287081,4.38838053 L16.3524429,4.38838053 C16.2060031,4.38838053 16.1083766,4.29086096 16.1083766,4.14458161 L16.1083766,3.16938594 C16.1083766,3.02310659 16.2060031,2.92558702 16.3524429,2.92558702 L17.3287081,2.92558702 C17.4751479,2.92558702 17.5727744,3.02310659 17.5727744,3.16938594 L17.5727744,4.14458161 L17.5727744,4.14458161 Z" id="Path" fill="#999999"></path> 
 
        <path d="M0,7.31396755 L6.58979041,7.31396755 L0,7.31396755 Z" id="Path" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
 
        <path d="M13.9117798,7.31396755 L20.5015702,7.31396755 L13.9117798,7.31396755 Z" id="Path-copy" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
 
        </g> 
 
       </svg> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <li class="cta-last-li"> 
 

 
     <a href="mailto:studio@nothingandco.com"> 
 

 
     <svg width="23px" height="auto" viewBox="19 554 26 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
       <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> 
 
       <desc>Created with Sketch.</desc> 
 
       <defs></defs> 
 
       <g id="Mail" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(20.000000, 555.000000)"> 
 
        <rect id="Rectangle-8" stroke="#999999" stroke-width="2" x="0" y="0" width="23" height="16.56" rx="2"></rect> 
 
        <path d="M7.26658876e-14,2.76 L8.38793439,9.50160064 C10.1066808,10.8830017 12.8986286,10.8835758 14.6272352,9.50023346 L23,2.79980769" id="Path-28" stroke="#999999" stroke-width="2"></path> 
 
        <path d="M15.64,8.28 L22.6677778,14.9751562" id="Path-28-copy" stroke="#999999" stroke-width="2"></path> 
 
        <path d="M1.84,8.28 L8.86777778,14.9751562" id="Path-28-copy-2" stroke="#999999" stroke-width="2" transform="translate(4.430656, 10.748041) scale(-1, 1) translate(-4.430656, -10.748041) "></path> 
 
       </g> 
 
       </svg> 
 
     <span>&nbsp;bibbiddybob@bobmail.bob</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>