主页 / 问题 / 1113322
Accepted
Алексей
Asked:2020-04-21 12:16:35 +0000 UTC2020-04-21 12:16:35 +0000 UTC

转换在 Chrome 中不起作用：悬停在使用 CSS 变量样式的多色图标上

  • 772

有一个 svg 图标，使用<use>. 有必要使用 实现从一种颜色到另一种颜色的平滑过渡:hover。图标由几个元素组成，每个元素都应该将颜色更改为某个特定的颜色，因此表单的 css 构造在这里不起作用

svg { fill: #ddd; transition: .25s; }
svg:hover { fill: #ddd; }

下面实现了一个最小的示例。ps如果你用FF检查，那么一切正常，但在chrome和opera中这是一个问题

:root {
  --color: #33d;
  --color-bg: #99b;
}

svg {
  width: 30px;
  height: 30px;
}

circle, path {
  transition: 0.25s;
}

svg:hover {
  --color: #d33;
  --color-bg: #d99;
}
<div style="display: none;">
  <svg id="play" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="11" cy="11" r="11" fill="var(--color)"/>
    <circle cx="11.0001" cy="11.0001" r="9.9" fill="var(--color-bg)"/>
    <path d="M8.7998 13.4619V8.4001C8.7998 7.61556 9.66199 7.13657 10.3281 7.55104L14.1245 9.91323C14.7308 10.2905 14.7577 11.1634 14.1757 11.5772L10.3793 14.2769C9.71725 14.7477 8.7998 14.2743 8.7998 13.4619Z" fill="var(--color)"/>
  </svg>
</div>

<svg>
  <use xlink:href="#play"></use>
</svg>

css

1 个回答

  1. Best Answer

    在尝试各种选项和组合Chrome中处理变量时，似乎这确实是一个问题，但它不适用于变量 <use>transition

    删除<use>，圈子并path包裹在一个组标签<g id="play">中，它在 chrome 中工作。 

    :root {
  --color: #33d;
  --color-bg: #99b;
}

svg {
  width: 30px;
  height: 30px;
}

circle, path {
  transition: 0.5s;
}

#play:hover {
  --color: #d33;
  --color-bg: #d99;
}
    <div >
  <svg  viewBox="0 0 22 22"  xmlns="http://www.w3.org/2000/svg">
    <g id="play">
	<circle cx="11" cy="11" r="11" fill="var(--color)"/>
    <circle cx="11.0001" cy="11.0001" r="9.9" fill="var(--color-bg)"/>
    <path d="M8.7998 13.4619V8.4001C8.7998 7.61556 9.66199 7.13657 10.3281 7.55104L14.1245 9.91323C14.7308 10.2905 14.7577 11.1634 14.1757 11.5772L10.3793 14.2769C9.71725 14.7477 8.7998 14.2743 8.7998 13.4619Z" fill="var(--color)"/>
	</g>
  </svg>
</div>

    下面是一个带有三色图标的示例 

     :root {
  --tr:1s;
  }
 #cup {
  --color-1: #c13127;
  --color-2: #ef5b49;
  --color-3: #cacaea;
 
 }

  #cup:hover {
 --color-1: gold;
  --color-2: skyblue;
  --color-3: yellowgreen;
   
 }
 rect, path {
 transition: var(--tr);
{
     <svg  xmlns="http://www.w3.org/2000/svg" width="100" height="100"  viewBox="0 0 20 20" >
       
	 <g id="cup">   
    <path   fill="var(--color-1)"   d="M15,17H14V9h3a3,3,0,0,1,3,3h0A5,5,0,0,1,15,17Zm1-6v3.83A3,3,0,0,0,18,12a1,1,0,0,0-1-1Z"/>
    <rect  fill="var(--color-2)" x="1" y="7" width="15" height="12" rx="3" ry="3"/>
    <path  fill="var(--color-3)"  d="M7.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,0,1-1.79.89Z"/>
    <path  fill="var(--color-3)" d="M3.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"/>
    <path  fill="var(--color-3)" d="M11.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"/>
   </g>
   
  
</svg>

    • 3

相关问题