Chrome上的SVG呈现不同颜色

时间:2019-01-02 11:48:42

标签: css google-chrome svg

更新:在单个.md文件中,这似乎是一个非常不寻常的问题,如果该道具是经过硬编码的,则徽标可以正常呈现,但是如果它是动态传递的,则徽标可以正常呈现。在其他使用消耗SVG的组件的地方,无论道具是否经过硬编码,似乎都可以使用。不幸的是,此问题暂时仍未解决-感谢大家的帮助!

我的SVG行为异常,呈现红色,而应该具有绿色/白色渐变。该问题似乎是Chrome特有的。有人经历过吗?我在Stack上看不到任何类似的帖子。

以下是徽标外观以及当前在Chrome上呈现的示例。

logo as it's supposed to look - and as it renders on Safari

logo as it renders on Chrome

这是SVG的代码

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
      <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
        <stop offset=".00526843" stop-color="#a2de68"/>
        <stop offset="1" stop-color="#b0e37f"/>
      </linearGradient>
      <path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
      <g>
        <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
          <stop offset=".08207131" stop-color="#65c800"/>
          <stop offset=".1119" stop-color="#61c700"/>
          <stop offset=".1385" stop-color="#74ce1f"/>
          <stop offset=".1933" stop-color="#99db5a"/>
          <stop offset=".2481" stop-color="#b8e68c"/>
          <stop offset=".3015" stop-color="#d1efb5"/>
          <stop offset=".3534" stop-color="#e5f6d6"/>
          <stop offset=".4033" stop-color="#f4fbec"/>
          <stop offset=".4503" stop-color="#fcfefa"/>
          <stop offset=".4914" stop-color="#fff"/>
          <stop offset=".5526" stop-color="#fcfefb"/>
          <stop offset=".6161" stop-color="#f5fbee"/>
          <stop offset=".6807" stop-color="#e8f7da"/>
          <stop offset=".7461" stop-color="#d6f0bc"/>
          <stop offset=".8121" stop-color="#bee897"/>
          <stop offset=".8786" stop-color="#a2de69"/>
          <stop offset=".9442" stop-color="#81d233"/>
          <stop offset="1" stop-color="#61c700"/>
        </linearGradient>
        <path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
        <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
          <stop offset="0" stop-color="#ccedad"/>
          <stop offset=".4861" stop-color="#61c700"/>
          <stop offset=".607" stop-color="#62c702"/>
          <stop offset=".6505" stop-color="#66c909"/>
          <stop offset=".6816" stop-color="#6ecb14"/>
          <stop offset=".7067" stop-color="#78cf25"/>
          <stop offset=".7282" stop-color="#86d43b"/>
          <stop offset=".7472" stop-color="#97da57"/>
          <stop offset=".7644" stop-color="#abe177"/>
          <stop offset=".7797" stop-color="#c2e99b"/>
          <stop offset=".783" stop-color="#c7eba4"/>
          <stop offset=".7933" stop-color="#caecaa"/>
          <stop offset=".826" stop-color="#d2efb5"/>
          <stop offset=".8721" stop-color="#d6f1bc"/>
          <stop offset="1" stop-color="#d7f1be"/>
        </linearGradient>
        <path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
        <path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
        <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
          <stop offset=".02421875" stop-color="#61c700"/>
          <stop offset=".08461425" stop-color="#7ad029"/>
          <stop offset=".1682" stop-color="#99db5a"/>
          <stop offset=".251" stop-color="#b2e484"/>
          <stop offset=".3314" stop-color="#c6eba4"/>
          <stop offset=".4087" stop-color="#d5f0ba"/>
          <stop offset=".4816" stop-color="#ddf3c8"/>
          <stop offset=".5453" stop-color="#e0f4cd"/>
          <stop offset=".6116" stop-color="#d1efb5"/>
          <stop offset=".7513" stop-color="#ace279"/>
          <stop offset=".9514" stop-color="#70cc18"/>
          <stop offset="1" stop-color="#61c700"/>
        </linearGradient>
        <path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
      </g>
    </svg>

0 个答案:

没有答案