不能在顏色我SVG標誌形象的所有字母

Question

我SVG標誌形象帶有一個<path>標籤內的<polygon>標籤中定義了一些信件，等等。 svg polygon, svg path { fill: red; }對某些字母有效，但不是全部。我不知道爲什麼，他們看起來相同的標記只有數字是不同的。任何建議？問題

內容的SVG圖像：

svg polygon, 
 
svg path { 
 
    fill: red; 
 
}

<svg width="131px" height="19px" viewBox="0 0 131 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> 
 
     <title>IW_logo_oneline</title> 
 
     <desc>Created with Sketch.</desc> 
 
     <defs> 
 
      <polygon id="path-1" points="0 18.1285706 130.219504 18.1285706 130.219504 0.000335294118 0 0.000335294118"></polygon> 
 
     </defs> 
 
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
      <g id="IW_logo_oneline"> 
 
       <g id="Logo"> 
 
        <path d="M13.6164042,13.8475353 C13.6164042,16.0604765 11.9497319,17.8543 9.77116891,17.8543 L4.80968151,17.8543 L4.80968151,0.251358824 L9.77116891,0.251358824 C11.9497319,0.251358824 13.6164042,2.04406471 13.6164042,4.25700588 L13.6164042,13.8475353 Z M8.20026975,14.4790059 C8.20026975,14.4790059 9.00498403,14.48.02149664,14.48C9.72273193,14.48.2907655,13.9045353 10.2907655,13.1925941 L10.2907655,4.78341765 C10.2907655,4.07147647 9.72273193,3.49588824 9.02149664,3.49588824 L8.20026975,3.49588824 L8.20026975,14.4790059 Z" id="Fill-1" fill="#43484D"></path> 
 
        <polygon id="Fill-3" fill="#43484D" points="26.887805 8.24186471 29.7323765 17.8547471 33.6029311 17.8547471 33.6029311 0.251805882 30.2772924 0.251805882 30.2772924 9.86357059 27.4338218 0.251805882 23.5621664 0.251805882 23.5621664 17.8547471 26.887805 17.8547471"></polygon> 
 
        <polygon id="Fill-5" fill="#43484D" points="22.470463 14.4795647 18.216816 14.4795647 18.216816 10.2515059 22.0026059 10.2515059 22.0026059 7.01032941 18.216816 7.01032941 18.216816 3.49644706 22.470463 3.49644706 22.470463 0.251917647 14.8273286 0.251917647 14.8273286 17.8548588 22.470463 17.8548588"></polygon> 
 
        <polygon id="Fill-7" fill="#43484D" points="37.2641059 17.8531824 40.6546941 17.8531824 40.6546941 3.49588824 43.4100975 3.49588824 43.4100975 0.251358824 34.5087025 0.251358824 34.5087025 3.49588824 37.2641059 3.49588824"></polygon> 
 
        <polygon id="Fill-9" fill="#43484D" points="57.5070185 0.251358824 48.6067244 0.251358824 48.6067244 3.49588824 51.3610269 3.49588824 51.3610269 17.8531824 54.7516151 17.8531824 54.7516151 3.49588824 57.5070185 3.49588824"></polygon> 
 
        <mask id="mask-2" fill="white"> 
 
         <use xlink:href="#path-1"></use> 
 
        </mask> 
 
        <g id="Clip-12"></g> 
 
        <polygon id="Fill-11" fill="#43484D" mask="url(#mask-2)" points="0 17.8536294 3.39058824 17.8536294 3.39058824 0.251805882 0 0.251805882"></polygon> 
 
        <polygon id="Fill-13" fill="#43484D" mask="url(#mask-2)" points="44.3132269 17.8536294 47.7038151 17.8536294 47.7038151 0.251805882 44.3132269 0.251805882"></polygon> 
 
        <polygon id="Fill-14" fill="#43484D" mask="url(#mask-2)" points="64.9721471 0.251358824 63.2229118 6.68900588 61.2997437 0.251358824 57.8442059 0.251358824 61.4736765 11.5496529 61.4736765 17.8531824 64.9721471 17.8531824 64.9721471 11.5496529 68.5146513 0.251358824"></polygon> 
 
        <path d="M90.2172782,0.000335294118 L90.2062697,0.000335294118 L90.1952613,0.000335294118 C87.4772866,0.000335294118 85.508984,1.60304118 85.508984,4.93921765 C85.508984,4.95821765 85.5078832,4.97498235 85.5078832,4.99398235 L85.5078832,13.0891 C85.5078832,13.1058647 85.508984,13.1215118 85.508984,13.1382765 C85.5067824,16.1950412 87.2802361,18.1073353 90.1952613,18.1073353 C90.1985639,18.1073353 90.2018664,18.1062176 90.2062697,18.1062176 C90.2095723,18.1062176 90.2128748,18.1073353 90.2172782,18.1073353 C93.1312025,18.1073353 94.906858,16.1950412 94.9035555,13.1382765 C94.9046563,13.1215118 94.9046563,13.1058647 94.9046563,13.0891 L94.9046563,4.99398235 C94.9046563,4.97498235 94.9035555,4.95821765 94.9035555,4.93921765 C94.9035555,1.60304118 92.9352529,0.000335294118 90.2172782,0.000335294118 L90.2172782,0.000335294118 Z M91.4127908,13.3696294 C91.4127908,13.8558059 91.3335303,14.7622176 90.2260849,14.7678059 L90.1875555,14.7678059 C89.0801101,14.7622176 89.0008496,13.8558059 89.0008496,13.3696294 L89.0008496,4.73580588 C89.0008496,4.11662941 89.0801101,3.31974706 90.1875555,3.31639412 L90.2260849,3.31639412 C91.3335303,3.31974706 91.4127908,4.11662941 91.4127908,4.73580588 L91.4127908,13.3696294 Z" id="Fill-15" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-16" fill="#43484D" mask="url(#mask-2)" points="80.4849689 8.22767059 79.2212042 0.251023529 76.8268765 0.251023529 75.5631118 8.22767059 74.2751286 0.251023529 70.8889437 0.251023529 73.7786496 17.8539647 76.7586244 17.8539647 78.0245908 9.42467059 79.2894563 17.8539647 82.2694311 17.8539647 85.159137 0.251023529 81.7718513 0.251023529"></polygon> 
 
        <path d="M105.230208,5.13447059 C105.230208,2.22747059 103.845351,0.252588235 101.566612,0.252588235 L96.1669899,0.252588235 L96.1669899,17.8544118 L99.5553765,17.8544118 L99.5553765,9.68441176 L99.8922336,9.68441176 L102.360318,17.8488235 L105.956763,17.8510588 L103.103385,9.234 C104.658872,8.53211765 105.230208,6.82211765 105.230208,5.13447059 M100.504301,7.011 L99.5553765,7.011 L99.5553765,3.496 L100.5032,3.496 C101.659082,3.496 101.906771,4.08611765 101.906771,5.19147059 C101.906771,6.29794118 101.657982,7.011 100.504301,7.011" id="Fill-17" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-18" fill="#43484D" mask="url(#mask-2)" points="116.345063 0.251358824 112.755223 0.251358824 109.946979 6.97512353 109.946979 0.259182353 106.558592 0.259182353 106.558592 17.8543 109.946979 17.8543 109.946979 8.51971176 112.768433 17.8453588 116.345063 17.8498294 113.114097 7.70047647"></polygon> 
 
        <path d="M116.363337,4.88892353 C116.363337,4.86768824 116.363337,4.84757059 116.364438,4.82521765 C116.363337,4.80733529 116.363337,4.78945294 116.363337,4.77157059 C116.362236,4.75257059 116.362236,4.90904118 116.363337,4.88892353" id="Fill-19" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <path d="M125.200113,13.3029059 C125.200113,13.3219059 125.201213,13.3386706 125.201213,13.3576706 L125.201213,13.2392 C125.201213,13.2604353 125.200113,13.2805529 125.200113,13.3029059" id="Fill-20" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <path d="M124.027277,9.87798824 C123.83463,9.64104706 123.544008,9.34375294 123.207151,9.0174 L123.201647,9.0174 C122.821857,8.65081176 122.345193,8.19816471 121.911462,7.78128235 C120.115992,6.05675294 119.775832,5.84998824 119.753815,4.59263529 C119.764824,3.99916471 119.877109,3.31181176 120.906395,3.30734118 L120.927311,3.30734118 C122.033655,3.31181176 122.114017,4.10757647 122.114017,4.72787059 L122.114017,5.57392941 L125.133622,5.57392941 C125.133622,5.57392941 125.132521,4.94916471 125.132521,4.93016471 C125.132521,1.77616471 123.804908,0.172341176 121.321412,0.00692941176 C121.321412,0.00692941176 120.999966,-0.00201176471 120.938319,0.000223529412 C120.877773,-0.00201176471 120.545319,0.00692941176 120.545319,0.00692941176 C118.080538,0.171223529 116.388546,1.71469412 116.364328,4.82510588 C116.375336,6.26016471 116.83879,7.36887059 117.469571,8.16575294 C117.469571,8.16575294 117.514706,8.22275294 117.536723,8.25069412 C117.739277,8.50216471 118.054118,8.81957647 118.416294,9.1694 L118.421798,9.1694 C118.782874,9.51698824 119.233118,9.94392941 119.652538,10.3462824 C121.446908,12.0719294 121.788168,12.2775765 121.809084,13.5349294 C121.799176,14.1295176 121.686891,14.8168706 120.657605,14.8213412 L120.635588,14.8213412 C119.528143,14.8168706 119.449983,14.0199882 119.449983,13.4008118 L119.449983,12.5547529 L116.329101,12.5547529 C116.329101,12.5547529 116.330202,13.1795176 116.330202,13.1974 C116.330202,16.3525176 117.759092,17.9574588 120.242588,18.1217529 C120.242588,18.1217529 120.631185,18.1306941 120.692832,18.1284588 C120.753378,18.1306941 121.018681,18.1217529 121.018681,18.1217529 C123.483462,17.9574588 125.176555,16.4139882 125.199672,13.3024588 C125.188664,11.8685176 124.72521,10.7598118 124.095529,9.96292941 L124.027277,9.87798824" id="Fill-21" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-22" fill="#43484D" mask="url(#mask-2)" points="126.895517 12.3970529 129.82155 12.3970529 130.220055 0.259405882 126.498113 0.259405882"></polygon> 
 
        <polygon id="Fill-23" fill="#43484D" mask="url(#mask-2)" points="126.562513 17.8502765 130.156756 17.8502765 130.156756 14.2011588 126.562513 14.2011588"></polygon> 
 
       </g> 
 
      </g> 
 
     </g> 
 
    </svg>

Answer 1

的mask元素是你的問題。它覆蓋了一些帶有白色不透明蒙版的字母，因此它們看起來沒有正確更改。不知道它的意圖是什麼，或者它不應該在那裏，但如果你刪除它，一切工作正常。

svg polygon, 
 
svg path { 
 
    fill: red; 
 
}

<svg width="131px" height="19px" viewBox="0 0 131 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> 
 
     <title>IW_logo_oneline</title> 
 
     <desc>Created with Sketch.</desc> 
 
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
      <g id="IW_logo_oneline"> 
 
       <g id="Logo"> 
 
        <path d="M13.6164042,13.8475353 C13.6164042,16.0604765 11.9497319,17.8543 9.77116891,17.8543 L4.80968151,17.8543 L4.80968151,0.251358824 L9.77116891,0.251358824 C11.9497319,0.251358824 13.6164042,2.04406471 13.6164042,4.25700588 L13.6164042,13.8475353 Z M8.20026975,14.4790059 C8.20026975,14.4790059 9.00498403,14.48.02149664,14.48C9.72273193,14.48.2907655,13.9045353 10.2907655,13.1925941 L10.2907655,4.78341765 C10.2907655,4.07147647 9.72273193,3.49588824 9.02149664,3.49588824 L8.20026975,3.49588824 L8.20026975,14.4790059 Z" id="Fill-1" fill="#43484D"></path> 
 
        <polygon id="Fill-3" fill="#43484D" points="26.887805 8.24186471 29.7323765 17.8547471 33.6029311 17.8547471 33.6029311 0.251805882 30.2772924 0.251805882 30.2772924 9.86357059 27.4338218 0.251805882 23.5621664 0.251805882 23.5621664 17.8547471 26.887805 17.8547471"></polygon> 
 
        <polygon id="Fill-5" fill="#43484D" points="22.470463 14.4795647 18.216816 14.4795647 18.216816 10.2515059 22.0026059 10.2515059 22.0026059 7.01032941 18.216816 7.01032941 18.216816 3.49644706 22.470463 3.49644706 22.470463 0.251917647 14.8273286 0.251917647 14.8273286 17.8548588 22.470463 17.8548588"></polygon> 
 
        <polygon id="Fill-7" fill="#43484D" points="37.2641059 17.8531824 40.6546941 17.8531824 40.6546941 3.49588824 43.4100975 3.49588824 43.4100975 0.251358824 34.5087025 0.251358824 34.5087025 3.49588824 37.2641059 3.49588824"></polygon> 
 
        <polygon id="Fill-9" fill="#43484D" points="57.5070185 0.251358824 48.6067244 0.251358824 48.6067244 3.49588824 51.3610269 3.49588824 51.3610269 17.8531824 54.7516151 17.8531824 54.7516151 3.49588824 57.5070185 3.49588824"></polygon> 
 
        <polygon id="Fill-11" fill="#43484D" mask="url(#mask-2)" points="0 17.8536294 3.39058824 17.8536294 3.39058824 0.251805882 0 0.251805882"></polygon> 
 
        <polygon id="Fill-13" fill="#43484D" mask="url(#mask-2)" points="44.3132269 17.8536294 47.7038151 17.8536294 47.7038151 0.251805882 44.3132269 0.251805882"></polygon> 
 
        <polygon id="Fill-14" fill="#43484D" mask="url(#mask-2)" points="64.9721471 0.251358824 63.2229118 6.68900588 61.2997437 0.251358824 57.8442059 0.251358824 61.4736765 11.5496529 61.4736765 17.8531824 64.9721471 17.8531824 64.9721471 11.5496529 68.5146513 0.251358824"></polygon> 
 
        <path d="M90.2172782,0.000335294118 L90.2062697,0.000335294118 L90.1952613,0.000335294118 C87.4772866,0.000335294118 85.508984,1.60304118 85.508984,4.93921765 C85.508984,4.95821765 85.5078832,4.97498235 85.5078832,4.99398235 L85.5078832,13.0891 C85.5078832,13.1058647 85.508984,13.1215118 85.508984,13.1382765 C85.5067824,16.1950412 87.2802361,18.1073353 90.1952613,18.1073353 C90.1985639,18.1073353 90.2018664,18.1062176 90.2062697,18.1062176 C90.2095723,18.1062176 90.2128748,18.1073353 90.2172782,18.1073353 C93.1312025,18.1073353 94.906858,16.1950412 94.9035555,13.1382765 C94.9046563,13.1215118 94.9046563,13.1058647 94.9046563,13.0891 L94.9046563,4.99398235 C94.9046563,4.97498235 94.9035555,4.95821765 94.9035555,4.93921765 C94.9035555,1.60304118 92.9352529,0.000335294118 90.2172782,0.000335294118 L90.2172782,0.000335294118 Z M91.4127908,13.3696294 C91.4127908,13.8558059 91.3335303,14.7622176 90.2260849,14.7678059 L90.1875555,14.7678059 C89.0801101,14.7622176 89.0008496,13.8558059 89.0008496,13.3696294 L89.0008496,4.73580588 C89.0008496,4.11662941 89.0801101,3.31974706 90.1875555,3.31639412 L90.2260849,3.31639412 C91.3335303,3.31974706 91.4127908,4.11662941 91.4127908,4.73580588 L91.4127908,13.3696294 Z" id="Fill-15" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-16" fill="#43484D" mask="url(#mask-2)" points="80.4849689 8.22767059 79.2212042 0.251023529 76.8268765 0.251023529 75.5631118 8.22767059 74.2751286 0.251023529 70.8889437 0.251023529 73.7786496 17.8539647 76.7586244 17.8539647 78.0245908 9.42467059 79.2894563 17.8539647 82.2694311 17.8539647 85.159137 0.251023529 81.7718513 0.251023529"></polygon> 
 
        <path d="M105.230208,5.13447059 C105.230208,2.22747059 103.845351,0.252588235 101.566612,0.252588235 L96.1669899,0.252588235 L96.1669899,17.8544118 L99.5553765,17.8544118 L99.5553765,9.68441176 L99.8922336,9.68441176 L102.360318,17.8488235 L105.956763,17.8510588 L103.103385,9.234 C104.658872,8.53211765 105.230208,6.82211765 105.230208,5.13447059 M100.504301,7.011 L99.5553765,7.011 L99.5553765,3.496 L100.5032,3.496 C101.659082,3.496 101.906771,4.08611765 101.906771,5.19147059 C101.906771,6.29794118 101.657982,7.011 100.504301,7.011" id="Fill-17" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-18" fill="#43484D" mask="url(#mask-2)" points="116.345063 0.251358824 112.755223 0.251358824 109.946979 6.97512353 109.946979 0.259182353 106.558592 0.259182353 106.558592 17.8543 109.946979 17.8543 109.946979 8.51971176 112.768433 17.8453588 116.345063 17.8498294 113.114097 7.70047647"></polygon> 
 
        <path d="M116.363337,4.88892353 C116.363337,4.86768824 116.363337,4.84757059 116.364438,4.82521765 C116.363337,4.80733529 116.363337,4.78945294 116.363337,4.77157059 C116.362236,4.75257059 116.362236,4.90904118 116.363337,4.88892353" id="Fill-19" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <path d="M125.200113,13.3029059 C125.200113,13.3219059 125.201213,13.3386706 125.201213,13.3576706 L125.201213,13.2392 C125.201213,13.2604353 125.200113,13.2805529 125.200113,13.3029059" id="Fill-20" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <path d="M124.027277,9.87798824 C123.83463,9.64104706 123.544008,9.34375294 123.207151,9.0174 L123.201647,9.0174 C122.821857,8.65081176 122.345193,8.19816471 121.911462,7.78128235 C120.115992,6.05675294 119.775832,5.84998824 119.753815,4.59263529 C119.764824,3.99916471 119.877109,3.31181176 120.906395,3.30734118 L120.927311,3.30734118 C122.033655,3.31181176 122.114017,4.10757647 122.114017,4.72787059 L122.114017,5.57392941 L125.133622,5.57392941 C125.133622,5.57392941 125.132521,4.94916471 125.132521,4.93016471 C125.132521,1.77616471 123.804908,0.172341176 121.321412,0.00692941176 C121.321412,0.00692941176 120.999966,-0.00201176471 120.938319,0.000223529412 C120.877773,-0.00201176471 120.545319,0.00692941176 120.545319,0.00692941176 C118.080538,0.171223529 116.388546,1.71469412 116.364328,4.82510588 C116.375336,6.26016471 116.83879,7.36887059 117.469571,8.16575294 C117.469571,8.16575294 117.514706,8.22275294 117.536723,8.25069412 C117.739277,8.50216471 118.054118,8.81957647 118.416294,9.1694 L118.421798,9.1694 C118.782874,9.51698824 119.233118,9.94392941 119.652538,10.3462824 C121.446908,12.0719294 121.788168,12.2775765 121.809084,13.5349294 C121.799176,14.1295176 121.686891,14.8168706 120.657605,14.8213412 L120.635588,14.8213412 C119.528143,14.8168706 119.449983,14.0199882 119.449983,13.4008118 L119.449983,12.5547529 L116.329101,12.5547529 C116.329101,12.5547529 116.330202,13.1795176 116.330202,13.1974 C116.330202,16.3525176 117.759092,17.9574588 120.242588,18.1217529 C120.242588,18.1217529 120.631185,18.1306941 120.692832,18.1284588 C120.753378,18.1306941 121.018681,18.1217529 121.018681,18.1217529 C123.483462,17.9574588 125.176555,16.4139882 125.199672,13.3024588 C125.188664,11.8685176 124.72521,10.7598118 124.095529,9.96292941 L124.027277,9.87798824" id="Fill-21" fill="#43484D" mask="url(#mask-2)"></path> 
 
        <polygon id="Fill-22" fill="#43484D" mask="url(#mask-2)" points="126.895517 12.3970529 129.82155 12.3970529 130.220055 0.259405882 126.498113 0.259405882"></polygon> 
 
        <polygon id="Fill-23" fill="#43484D" mask="url(#mask-2)" points="126.562513 17.8502765 130.156756 17.8502765 130.156756 14.2011588 126.562513 14.2011588"></polygon> 
 
       </g> 
 
      </g> 
 
     </g> 
 
    </svg>

我還除去<defs>元件作爲<mask>使用內<defs>定義的唯一元件。

Answer 2

刪除mask="url(#mask-2)"。

而且你有#path-1多邊形作爲本文的面具。如果您的最終結果必須顯示文本的完全不透明度，請將其擦除。