只有当我使用精灵时,我的代码才会填充我的svg图像的笔划

问题描述 投票:0回答:1

我有一个svg徽标,在文本中间有一些文本路径和图标路径。当它是内联的并且我使用“fill:#fff”时,它只填充好的文本。当我使用精灵并使用“fill:#fff”时,它不会改变任何东西,所有东西都被填充为黑色,即使在图标的笔划内也是如此,这是不应该做的。

请检查codepen中的css注释以查看这两个示例的屏幕截图。

codepen:https://codepen.io/rawan-al-faraj/pen/VggeWj

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#fff;stroke-width:2.0134;stroke-miterlimit:10;}
</style>
<g>
    <g>
        <path class="st0" d="M393.12,298.67L393.12,298.67c-8.73,8.73-22.89,8.73-31.63,0l0,0c-7.56-7.56-7.56-19.81,0-27.37l15.81-15.81
            l15.81,15.81C400.68,278.86,400.68,291.11,393.12,298.67z"/>
        <polyline class="st0" points="391.31,300.47 377.31,286.46 363.3,300.47      "/>
        <polyline class="st0" points="395.76,296.02 377.31,277.57 358.85,296.02         "/>
        <polyline class="st0" points="398.2,289.65 377.31,268.76 356.4,289.66       "/>
        <line class="st0" x1="377.31" y1="255.48" x2="377.31" y2="268.6"/>
        <line class="st0" x1="377.31" y1="286.46" x2="377.31" y2="304.65"/>
    </g>
    <g>
        <path class="st0" d="M361.49,312.34L361.49,312.34c8.73-8.73,22.89-8.73,31.63,0l0,0c7.56,7.56,7.56,19.81,0,27.37l-15.81,15.81
            l-15.81-15.81C353.93,332.15,353.93,319.9,361.49,312.34z"/>
        <polyline class="st0" points="363.3,310.54 377.31,324.55 391.31,310.54      "/>
        <polyline class="st0" points="358.85,314.98 377.31,333.44 395.76,314.98         "/>
        <polyline class="st0" points="356.41,321.36 377.31,342.25 398.21,321.35         "/>
        <line class="st0" x1="377.31" y1="355.52" x2="377.31" y2="342.41"/>
        <line class="st0" x1="377.31" y1="324.55" x2="377.31" y2="306.35"/>
    </g>
    <g>
        <path class="st0" d="M384.14,321.32L384.14,321.32c-8.73-8.73-8.73-22.89,0-31.63l0,0c7.56-7.56,19.81-7.56,27.37,0l15.81,15.81
            l-15.81,15.81C403.95,328.88,391.7,328.88,384.14,321.32z"/>
        <polyline class="st0" points="382.34,319.51 396.35,305.5 382.34,291.5       "/>
        <polyline class="st0" points="386.79,323.96 405.24,305.5 386.79,287.05      "/>
        <polyline class="st0" points="393.16,326.4 414.05,305.5 393.15,284.6        "/>
        <line class="st0" x1="427.33" y1="305.5" x2="414.21" y2="305.5"/>
        <line class="st0" x1="396.35" y1="305.5" x2="378.16" y2="305.5"/>
    </g>
    <g>
        <path class="st0" d="M370.47,289.69L370.47,289.69c8.73,8.73,8.73,22.89,0,31.63v0c-7.56,7.56-19.81,7.56-27.37,0l-15.81-15.81
            l15.81-15.81C350.66,282.13,362.91,282.13,370.47,289.69z"/>
        <polyline class="st0" points="372.27,291.5 358.26,305.5 372.27,319.51       "/>
        <polyline class="st0" points="367.83,287.05 349.37,305.5 367.83,323.96      "/>
        <polyline class="st0" points="361.46,284.61 340.56,305.5 361.47,326.41      "/>
        <line class="st0" x1="327.29" y1="305.5" x2="340.4" y2="305.5"/>
        <line class="st0" x1="358.26" y1="305.5" x2="376.46" y2="305.5"/>
    </g>
</g>
<g>
    <path d="M231.96,314.57h-2.16v-21.24h12.81v1.92h-10.65v7.35h9.9v1.92h-9.9V314.57z"/>
    <path d="M252.72,314.57h-2.16v-21.24h6.24c1.04,0,2,0.1,2.9,0.3c0.89,0.2,1.66,0.53,2.31,0.98c0.65,0.45,1.15,1.04,1.51,1.75
        c0.36,0.72,0.54,1.6,0.54,2.64c0,0.78-0.14,1.49-0.42,2.13c-0.28,0.64-0.66,1.2-1.14,1.67c-0.48,0.47-1.05,0.85-1.71,1.12
        c-0.66,0.28-1.38,0.46-2.16,0.54l6.21,10.11h-2.64l-5.88-9.93h-3.6V314.57z M252.72,302.78h3.75c1.74,0,3.08-0.32,4.02-0.95
        c0.94-0.63,1.41-1.57,1.41-2.83c0-0.7-0.13-1.29-0.39-1.77c-0.26-0.48-0.62-0.87-1.08-1.17c-0.46-0.3-1.02-0.52-1.68-0.66
        c-0.66-0.14-1.39-0.21-2.19-0.21h-3.84V302.78z"/>
    <path d="M274.59,312.65h11.37v1.92h-13.53v-21.24h13.17v1.92h-11.01v7.29h10.29v1.92h-10.29V312.65z"/>
    <path d="M296.25,312.65h11.37v1.92h-13.53v-21.24h13.17v1.92h-11.01v7.29h10.29v1.92h-10.29V312.65z"/>
</g>
<g>
    <path d="M456.13,296.75c-0.46-0.64-1.05-1.15-1.77-1.54c-0.72-0.39-1.59-0.58-2.61-0.58c-0.52,0-1.05,0.08-1.59,0.24
        s-1.03,0.41-1.47,0.74c-0.44,0.33-0.79,0.75-1.06,1.24c-0.27,0.5-0.41,1.09-0.41,1.77s0.13,1.24,0.39,1.68
        c0.26,0.44,0.6,0.82,1.03,1.12c0.43,0.31,0.92,0.57,1.47,0.77c0.55,0.2,1.12,0.4,1.72,0.6c0.74,0.24,1.48,0.5,2.23,0.78
        s1.42,0.64,2.02,1.09s1.09,1.02,1.47,1.71c0.38,0.69,0.57,1.57,0.57,2.62c0,1.06-0.2,1.98-0.61,2.75c-0.4,0.77-0.93,1.41-1.58,1.91
        s-1.38,0.87-2.21,1.11c-0.83,0.24-1.67,0.36-2.5,0.36c-0.64,0-1.28-0.07-1.92-0.2c-0.64-0.13-1.25-0.33-1.83-0.58
        s-1.12-0.59-1.62-0.99c-0.5-0.4-0.94-0.86-1.32-1.38l1.86-1.38c0.46,0.76,1.1,1.4,1.93,1.91s1.8,0.76,2.93,0.76
        c0.54,0,1.09-0.08,1.65-0.25s1.07-0.43,1.51-0.78c0.45-0.35,0.82-0.78,1.11-1.29c0.29-0.51,0.44-1.11,0.44-1.79
        c0-0.74-0.15-1.36-0.44-1.85c-0.29-0.49-0.67-0.9-1.16-1.23c-0.48-0.33-1.03-0.6-1.65-0.83c-0.62-0.22-1.27-0.44-1.95-0.66
        c-0.7-0.22-1.39-0.47-2.07-0.75c-0.68-0.28-1.29-0.64-1.83-1.09s-0.97-1-1.3-1.67s-0.5-1.47-0.5-2.43c0-1.02,0.21-1.9,0.62-2.64
        c0.41-0.74,0.95-1.35,1.6-1.83c0.66-0.48,1.39-0.83,2.19-1.05c0.8-0.22,1.59-0.33,2.37-0.33c1.44,0,2.67,0.25,3.69,0.77
        c1.02,0.51,1.79,1.12,2.31,1.81L456.13,296.75z"/>
    <path d="M466.66,293.33h6c1.08,0,2.06,0.12,2.94,0.35c0.88,0.23,1.63,0.58,2.26,1.05s1.12,1.06,1.46,1.77s0.51,1.54,0.51,2.5
        s-0.18,1.8-0.53,2.5c-0.35,0.71-0.84,1.3-1.47,1.77s-1.39,0.83-2.28,1.06c-0.89,0.24-1.88,0.36-2.96,0.36h-3.78v9.87h-2.16V293.33z
         M468.82,302.87h3.66c1.7,0,2.99-0.33,3.87-0.99c0.88-0.66,1.32-1.62,1.32-2.88c0-1.32-0.46-2.28-1.37-2.89s-2.19-0.92-3.83-0.92
        h-3.66V302.87z"/>
    <path d="M490.12,314.57h-2.16v-21.24h2.16V314.57z"/>
    <path d="M501.82,314.57h-2.16v-21.24h6.24c1.04,0,2,0.1,2.89,0.3c0.89,0.2,1.66,0.53,2.31,0.98c0.65,0.45,1.15,1.04,1.51,1.75
        s0.54,1.6,0.54,2.64c0,0.78-0.14,1.49-0.42,2.13c-0.28,0.64-0.66,1.2-1.14,1.67c-0.48,0.47-1.05,0.85-1.71,1.12
        c-0.66,0.28-1.38,0.46-2.16,0.54l6.21,10.11h-2.64l-5.88-9.93h-3.6V314.57z M501.82,302.78h3.75c1.74,0,3.08-0.32,4.02-0.95
        S511,300.26,511,299c0-0.7-0.13-1.29-0.39-1.77c-0.26-0.48-0.62-0.87-1.08-1.17c-0.46-0.3-1.02-0.52-1.68-0.66
        c-0.66-0.14-1.39-0.21-2.19-0.21h-3.84V302.78z"/>
    <path d="M523.69,314.57h-2.16v-21.24h2.16V314.57z"/>
    <path d="M540.04,314.57h-2.16v-19.32h-7.11v-1.92h16.38v1.92h-7.11V314.57z"/>
</g>
<g>
    <path d="M290.36,333.98v8.43h-2.56v-8.43h-3v-2.19h8.56v2.19H290.36z"/>
    <path d="M300.21,342.41l-2.31-4.21h-0.87v4.21h-2.5v-10.62h4.05c0.51,0,1.01,0.05,1.49,0.16c0.48,0.11,0.92,0.28,1.3,0.53
        s0.69,0.58,0.92,0.99c0.23,0.41,0.34,0.92,0.34,1.53c0,0.72-0.19,1.33-0.58,1.82s-0.93,0.84-1.62,1.05l2.77,4.54H300.21z
         M300.11,335.05c0-0.25-0.05-0.45-0.16-0.61c-0.11-0.15-0.24-0.27-0.41-0.36c-0.17-0.08-0.35-0.14-0.56-0.17s-0.4-0.04-0.6-0.04
        h-1.37v2.47h1.22c0.21,0,0.43-0.02,0.65-0.05c0.22-0.03,0.42-0.1,0.6-0.19c0.18-0.09,0.33-0.22,0.44-0.39
        C300.05,335.54,300.11,335.32,300.11,335.05z"/>
    <path d="M311.67,342.41l-0.82-2.08h-4.11l-0.78,2.08h-2.79l4.46-10.62h2.49l4.41,10.62H311.67z M308.82,334.63l-1.35,3.65h2.67
        L308.82,334.63z"/>
    <path d="M320.22,342.41h-2.56l-4.02-10.62h2.88l2.46,7.53h0.06l2.45-7.53h2.83L320.22,342.41z"/>
    <path d="M325.19,342.41v-10.62h7.14v2.16h-4.67v2.01h4.41v2.06h-4.41v2.2h4.94v2.19H325.19z"/>
    <path d="M334.29,342.41v-10.62h2.58v8.38h4.11v2.24H334.29z"/>
</g>
<g>
    <path d="M422.51,342.41l-0.83-2.08h-4.11l-0.78,2.08H414l4.46-10.62h2.49l4.41,10.62H422.51z M419.66,334.63l-1.35,3.65h2.67
        L419.66,334.63z"/>
    <path d="M433.59,342.43c-0.7,0.17-1.45,0.25-2.27,0.25c-0.85,0-1.63-0.13-2.35-0.4c-0.71-0.27-1.33-0.65-1.84-1.14
        c-0.51-0.49-0.92-1.08-1.21-1.76c-0.29-0.69-0.44-1.45-0.44-2.29c0-0.85,0.15-1.62,0.44-2.31c0.29-0.69,0.7-1.28,1.22-1.76
        s1.13-0.86,1.83-1.12c0.7-0.26,1.46-0.39,2.26-0.39c0.84,0,1.62,0.13,2.34,0.38c0.72,0.25,1.3,0.6,1.75,1.03l-1.62,1.84
        c-0.25-0.29-0.58-0.53-0.99-0.71c-0.41-0.19-0.88-0.28-1.39-0.28c-0.45,0-0.87,0.08-1.25,0.25c-0.38,0.17-0.71,0.4-0.99,0.69
        c-0.28,0.29-0.5,0.64-0.65,1.05c-0.16,0.41-0.23,0.85-0.23,1.33c0,0.49,0.07,0.94,0.21,1.35c0.14,0.41,0.35,0.76,0.62,1.06
        c0.28,0.3,0.62,0.53,1.02,0.69c0.4,0.17,0.87,0.25,1.39,0.25c0.3,0,0.58-0.02,0.86-0.07c0.27-0.04,0.52-0.12,0.75-0.22v-1.94h-2.03
        v-2.07h4.38v5.62C434.89,342.04,434.28,342.26,433.59,342.43z"/>
    <path d="M437.51,342.41v-10.62h7.14v2.16h-4.67v2.01h4.41v2.06h-4.41v2.2h4.93v2.19H437.51z"/>
    <path d="M453.36,342.41l-4.28-6.95h-0.04l0.06,6.95h-2.49v-10.62h2.92l4.26,6.93h0.05l-0.06-6.93h2.49v10.62H453.36z"/>
    <path d="M466.07,342.22c-0.69,0.32-1.49,0.47-2.38,0.47c-0.82,0-1.58-0.13-2.27-0.41c-0.7-0.27-1.3-0.65-1.81-1.15
        s-0.91-1.09-1.2-1.78c-0.29-0.69-0.43-1.45-0.43-2.28c0-0.85,0.15-1.62,0.44-2.31c0.29-0.69,0.7-1.28,1.22-1.76
        c0.52-0.49,1.13-0.86,1.83-1.12c0.7-0.26,1.45-0.39,2.26-0.39c0.75,0,1.49,0.13,2.21,0.4c0.73,0.27,1.31,0.65,1.76,1.16l-1.74,1.74
        c-0.24-0.33-0.56-0.57-0.95-0.73c-0.39-0.16-0.79-0.24-1.2-0.24c-0.45,0-0.86,0.08-1.24,0.25c-0.38,0.16-0.7,0.39-0.97,0.68
        c-0.27,0.29-0.48,0.63-0.63,1.03c-0.15,0.39-0.22,0.83-0.22,1.3c0,0.48,0.07,0.92,0.22,1.32s0.36,0.74,0.62,1.03
        c0.27,0.29,0.58,0.51,0.95,0.67c0.37,0.16,0.77,0.24,1.21,0.24c0.51,0,0.96-0.1,1.33-0.3s0.68-0.46,0.92-0.78l1.79,1.68
        C467.34,341.48,466.76,341.91,466.07,342.22z"/>
    <path d="M473.88,337.91v4.5h-2.57v-4.5l-3.99-6.12h3.1l2.26,3.93l2.27-3.93h3L473.88,337.91z"/>
</g>
</svg>

精灵:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
     <style type="text/css">
      .st0{fill:none;stroke:#fff;stroke-width:2.0134;stroke-miterlimit:10;}
    </style>
    <g>
      <g>
        <path class="st0" d="M393.12,298.67L393.12,298.67c-8.73,8.73-22.89,8.73-31.63,0l0,0c-7.56-7.56-7.56-19.81,0-27.37l15.81-15.81
          l15.81,15.81C400.68,278.86,400.68,291.11,393.12,298.67z"/>
          <polyline class="st0" points="391.31,300.47 377.31,286.46 363.3,300.47    "/>
          <polyline class="st0" points="395.76,296.02 377.31,277.57 358.85,296.02     "/>
          <polyline class="st0" points="398.2,289.65 377.31,268.76 356.4,289.66     "/>
          <line class="st0" x1="377.31" y1="255.48" x2="377.31" y2="268.6"/>
          <line class="st0" x1="377.31" y1="286.46" x2="377.31" y2="304.65"/>
        </g>
        <g>
          <path class="st0" d="M361.49,312.34L361.49,312.34c8.73-8.73,22.89-8.73,31.63,0l0,0c7.56,7.56,7.56,19.81,0,27.37l-15.81,15.81
            l-15.81-15.81C353.93,332.15,353.93,319.9,361.49,312.34z"/>
            <polyline class="st0" points="363.3,310.54 377.31,324.55 391.31,310.54    "/>
            <polyline class="st0" points="358.85,314.98 377.31,333.44 395.76,314.98     "/>
            <polyline class="st0" points="356.41,321.36 377.31,342.25 398.21,321.35     "/>
            <line class="st0" x1="377.31" y1="355.52" x2="377.31" y2="342.41"/>
            <line class="st0" x1="377.31" y1="324.55" x2="377.31" y2="306.35"/>
          </g>
          <g>
            <path class="st0" d="M384.14,321.32L384.14,321.32c-8.73-8.73-8.73-22.89,0-31.63l0,0c7.56-7.56,19.81-7.56,27.37,0l15.81,15.81
              l-15.81,15.81C403.95,328.88,391.7,328.88,384.14,321.32z"/>
              <polyline class="st0" points="382.34,319.51 396.35,305.5 382.34,291.5     "/>
              <polyline class="st0" points="386.79,323.96 405.24,305.5 386.79,287.05    "/>
              <polyline class="st0" points="393.16,326.4 414.05,305.5 393.15,284.6    "/>
              <line class="st0" x1="427.33" y1="305.5" x2="414.21" y2="305.5"/>
              <line class="st0" x1="396.35" y1="305.5" x2="378.16" y2="305.5"/>
            </g>
            <g>
              <path class="st0" d="M370.47,289.69L370.47,289.69c8.73,8.73,8.73,22.89,0,31.63v0c-7.56,7.56-19.81,7.56-27.37,0l-15.81-15.81
                l15.81-15.81C350.66,282.13,362.91,282.13,370.47,289.69z"/>
                <polyline class="st0" points="372.27,291.5 358.26,305.5 372.27,319.51     "/>
                <polyline class="st0" points="367.83,287.05 349.37,305.5 367.83,323.96    "/>
                <polyline class="st0" points="361.46,284.61 340.56,305.5 361.47,326.41    "/>
                <line class="st0" x1="327.29" y1="305.5" x2="340.4" y2="305.5"/>
                <line class="st0" x1="358.26" y1="305.5" x2="376.46" y2="305.5"/>
              </g>
            </g>
            <g>
              <path d="M231.96,314.57h-2.16v-21.24h12.81v1.92h-10.65v7.35h9.9v1.92h-9.9V314.57z"/>
              <path d="M252.72,314.57h-2.16v-21.24h6.24c1.04,0,2,0.1,2.9,0.3c0.89,0.2,1.66,0.53,2.31,0.98c0.65,0.45,1.15,1.04,1.51,1.75
                c0.36,0.72,0.54,1.6,0.54,2.64c0,0.78-0.14,1.49-0.42,2.13c-0.28,0.64-0.66,1.2-1.14,1.67c-0.48,0.47-1.05,0.85-1.71,1.12
                c-0.66,0.28-1.38,0.46-2.16,0.54l6.21,10.11h-2.64l-5.88-9.93h-3.6V314.57z M252.72,302.78h3.75c1.74,0,3.08-0.32,4.02-0.95
                c0.94-0.63,1.41-1.57,1.41-2.83c0-0.7-0.13-1.29-0.39-1.77c-0.26-0.48-0.62-0.87-1.08-1.17c-0.46-0.3-1.02-0.52-1.68-0.66
                c-0.66-0.14-1.39-0.21-2.19-0.21h-3.84V302.78z"/>
              <path d="M274.59,312.65h11.37v1.92h-13.53v-21.24h13.17v1.92h-11.01v7.29h10.29v1.92h-10.29V312.65z"/>
              <path d="M296.25,312.65h11.37v1.92h-13.53v-21.24h13.17v1.92h-11.01v7.29h10.29v1.92h-10.29V312.65z"/>
            </g>
            <g>
              <path d="M456.13,296.75c-0.46-0.64-1.05-1.15-1.77-1.54c-0.72-0.39-1.59-0.58-2.61-0.58c-0.52,0-1.05,0.08-1.59,0.24
                s-1.03,0.41-1.47,0.74c-0.44,0.33-0.79,0.75-1.06,1.24c-0.27,0.5-0.41,1.09-0.41,1.77s0.13,1.24,0.39,1.68
                c0.26,0.44,0.6,0.82,1.03,1.12c0.43,0.31,0.92,0.57,1.47,0.77c0.55,0.2,1.12,0.4,1.72,0.6c0.74,0.24,1.48,0.5,2.23,0.78
                s1.42,0.64,2.02,1.09s1.09,1.02,1.47,1.71c0.38,0.69,0.57,1.57,0.57,2.62c0,1.06-0.2,1.98-0.61,2.75c-0.4,0.77-0.93,1.41-1.58,1.91
                s-1.38,0.87-2.21,1.11c-0.83,0.24-1.67,0.36-2.5,0.36c-0.64,0-1.28-0.07-1.92-0.2c-0.64-0.13-1.25-0.33-1.83-0.58
                s-1.12-0.59-1.62-0.99c-0.5-0.4-0.94-0.86-1.32-1.38l1.86-1.38c0.46,0.76,1.1,1.4,1.93,1.91s1.8,0.76,2.93,0.76
                c0.54,0,1.09-0.08,1.65-0.25s1.07-0.43,1.51-0.78c0.45-0.35,0.82-0.78,1.11-1.29c0.29-0.51,0.44-1.11,0.44-1.79
                c0-0.74-0.15-1.36-0.44-1.85c-0.29-0.49-0.67-0.9-1.16-1.23c-0.48-0.33-1.03-0.6-1.65-0.83c-0.62-0.22-1.27-0.44-1.95-0.66
                c-0.7-0.22-1.39-0.47-2.07-0.75c-0.68-0.28-1.29-0.64-1.83-1.09s-0.97-1-1.3-1.67s-0.5-1.47-0.5-2.43c0-1.02,0.21-1.9,0.62-2.64
                c0.41-0.74,0.95-1.35,1.6-1.83c0.66-0.48,1.39-0.83,2.19-1.05c0.8-0.22,1.59-0.33,2.37-0.33c1.44,0,2.67,0.25,3.69,0.77
                c1.02,0.51,1.79,1.12,2.31,1.81L456.13,296.75z"/>
              <path d="M466.66,293.33h6c1.08,0,2.06,0.12,2.94,0.35c0.88,0.23,1.63,0.58,2.26,1.05s1.12,1.06,1.46,1.77s0.51,1.54,0.51,2.5
                s-0.18,1.8-0.53,2.5c-0.35,0.71-0.84,1.3-1.47,1.77s-1.39,0.83-2.28,1.06c-0.89,0.24-1.88,0.36-2.96,0.36h-3.78v9.87h-2.16V293.33z
                M468.82,302.87h3.66c1.7,0,2.99-0.33,3.87-0.99c0.88-0.66,1.32-1.62,1.32-2.88c0-1.32-0.46-2.28-1.37-2.89s-2.19-0.92-3.83-0.92
                h-3.66V302.87z"/>
              <path d="M490.12,314.57h-2.16v-21.24h2.16V314.57z"/>
              <path d="M501.82,314.57h-2.16v-21.24h6.24c1.04,0,2,0.1,2.89,0.3c0.89,0.2,1.66,0.53,2.31,0.98c0.65,0.45,1.15,1.04,1.51,1.75
                s0.54,1.6,0.54,2.64c0,0.78-0.14,1.49-0.42,2.13c-0.28,0.64-0.66,1.2-1.14,1.67c-0.48,0.47-1.05,0.85-1.71,1.12
                c-0.66,0.28-1.38,0.46-2.16,0.54l6.21,10.11h-2.64l-5.88-9.93h-3.6V314.57z M501.82,302.78h3.75c1.74,0,3.08-0.32,4.02-0.95
                S511,300.26,511,299c0-0.7-0.13-1.29-0.39-1.77c-0.26-0.48-0.62-0.87-1.08-1.17c-0.46-0.3-1.02-0.52-1.68-0.66
                c-0.66-0.14-1.39-0.21-2.19-0.21h-3.84V302.78z"/>
                <path d="M523.69,314.57h-2.16v-21.24h2.16V314.57z"/>
                <path d="M540.04,314.57h-2.16v-19.32h-7.11v-1.92h16.38v1.92h-7.11V314.57z"/>
            </g>
            <g>
                <path d="M290.36,333.98v8.43h-2.56v-8.43h-3v-2.19h8.56v2.19H290.36z"/>
                <path d="M300.21,342.41l-2.31-4.21h-0.87v4.21h-2.5v-10.62h4.05c0.51,0,1.01,0.05,1.49,0.16c0.48,0.11,0.92,0.28,1.3,0.53
                  s0.69,0.58,0.92,0.99c0.23,0.41,0.34,0.92,0.34,1.53c0,0.72-0.19,1.33-0.58,1.82s-0.93,0.84-1.62,1.05l2.77,4.54H300.21z
                  M300.11,335.05c0-0.25-0.05-0.45-0.16-0.61c-0.11-0.15-0.24-0.27-0.41-0.36c-0.17-0.08-0.35-0.14-0.56-0.17s-0.4-0.04-0.6-0.04
                  h-1.37v2.47h1.22c0.21,0,0.43-0.02,0.65-0.05c0.22-0.03,0.42-0.1,0.6-0.19c0.18-0.09,0.33-0.22,0.44-0.39
                  C300.05,335.54,300.11,335.32,300.11,335.05z"/>
                <path d="M311.67,342.41l-0.82-2.08h-4.11l-0.78,2.08h-2.79l4.46-10.62h2.49l4.41,10.62H311.67z M308.82,334.63l-1.35,3.65h2.67
                  L308.82,334.63z"/>
                <path d="M320.22,342.41h-2.56l-4.02-10.62h2.88l2.46,7.53h0.06l2.45-7.53h2.83L320.22,342.41z"/>
                <path d="M325.19,342.41v-10.62h7.14v2.16h-4.67v2.01h4.41v2.06h-4.41v2.2h4.94v2.19H325.19z"/>
                <path d="M334.29,342.41v-10.62h2.58v8.38h4.11v2.24H334.29z"/>
            </g>
            <g>
                <path d="M422.51,342.41l-0.83-2.08h-4.11l-0.78,2.08H414l4.46-10.62h2.49l4.41,10.62H422.51z M419.66,334.63l-1.35,3.65h2.67
                  L419.66,334.63z"/>
                <path d="M433.59,342.43c-0.7,0.17-1.45,0.25-2.27,0.25c-0.85,0-1.63-0.13-2.35-0.4c-0.71-0.27-1.33-0.65-1.84-1.14
                  c-0.51-0.49-0.92-1.08-1.21-1.76c-0.29-0.69-0.44-1.45-0.44-2.29c0-0.85,0.15-1.62,0.44-2.31c0.29-0.69,0.7-1.28,1.22-1.76
                  s1.13-0.86,1.83-1.12c0.7-0.26,1.46-0.39,2.26-0.39c0.84,0,1.62,0.13,2.34,0.38c0.72,0.25,1.3,0.6,1.75,1.03l-1.62,1.84
                  c-0.25-0.29-0.58-0.53-0.99-0.71c-0.41-0.19-0.88-0.28-1.39-0.28c-0.45,0-0.87,0.08-1.25,0.25c-0.38,0.17-0.71,0.4-0.99,0.69
                  c-0.28,0.29-0.5,0.64-0.65,1.05c-0.16,0.41-0.23,0.85-0.23,1.33c0,0.49,0.07,0.94,0.21,1.35c0.14,0.41,0.35,0.76,0.62,1.06
                  c0.28,0.3,0.62,0.53,1.02,0.69c0.4,0.17,0.87,0.25,1.39,0.25c0.3,0,0.58-0.02,0.86-0.07c0.27-0.04,0.52-0.12,0.75-0.22v-1.94h-2.03
                  v-2.07h4.38v5.62C434.89,342.04,434.28,342.26,433.59,342.43z"/>
                  <path d="M437.51,342.41v-10.62h7.14v2.16h-4.67v2.01h4.41v2.06h-4.41v2.2h4.93v2.19H437.51z"/>
                  <path d="M453.36,342.41l-4.28-6.95h-0.04l0.06,6.95h-2.49v-10.62h2.92l4.26,6.93h0.05l-0.06-6.93h2.49v10.62H453.36z"/>
                  <path d="M466.07,342.22c-0.69,0.32-1.49,0.47-2.38,0.47c-0.82,0-1.58-0.13-2.27-0.41c-0.7-0.27-1.3-0.65-1.81-1.15
                    s-0.91-1.09-1.2-1.78c-0.29-0.69-0.43-1.45-0.43-2.28c0-0.85,0.15-1.62,0.44-2.31c0.29-0.69,0.7-1.28,1.22-1.76
                    c0.52-0.49,1.13-0.86,1.83-1.12c0.7-0.26,1.45-0.39,2.26-0.39c0.75,0,1.49,0.13,2.21,0.4c0.73,0.27,1.31,0.65,1.76,1.16l-1.74,1.74
                    c-0.24-0.33-0.56-0.57-0.95-0.73c-0.39-0.16-0.79-0.24-1.2-0.24c-0.45,0-0.86,0.08-1.24,0.25c-0.38,0.16-0.7,0.39-0.97,0.68
                    c-0.27,0.29-0.48,0.63-0.63,1.03c-0.15,0.39-0.22,0.83-0.22,1.3c0,0.48,0.07,0.92,0.22,1.32s0.36,0.74,0.62,1.03
                    c0.27,0.29,0.58,0.51,0.95,0.67c0.37,0.16,0.77,0.24,1.21,0.24c0.51,0,0.96-0.1,1.33-0.3s0.68-0.46,0.92-0.78l1.79,1.68
                    C467.34,341.48,466.76,341.91,466.07,342.22z"/>
                  <path d="M473.88,337.91v4.5h-2.57v-4.5l-3.99-6.12h3.1l2.26,3.93l2.27-3.93h3L473.88,337.91z"/>
            </g>
    </symbol>

  </defs>
</svg>

我的HTML:

<li class="navigation__logo">
    <svg >
      <use xlink:href="svg/sprite.svg#Layer_1"></use>
    </svg>
</li>
css svg css-sprites
1个回答
0
投票

从.svg文件(精灵)中删除样式,并将这些规则用于qazxsw poi元素,或多或少像这样:

<use>

你也可以看看这里:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style> body{background:black;} use{fill:none;stroke:#fff;stroke-width:2.0134;stroke-miterlimit:10;} </style> </head> <body> <li class="navigation__logo"> <svg > <use xlink:href="sof.svg#Layer_1"></use> </svg> </li> </body> </html>

© www.soinside.com 2019 - 2024. All rights reserved.