css 两个SVGReact之间的过渡

ajsxfq5m 于 4个月前发布在 React

关注(0)|答案(3)|浏览(58)

我有一个带有徽标的标题，在左侧，页面标题-在中间，用户菜单，在右侧。目前我在每个页面标题旁边显示SVG。例如，在页面/organizations上，我显示：
x1c 0d1x的数据
之后，我添加了一个SVG，当我将鼠标悬停在元素上时，它会显示（它是相同的SVG，但是填充了）

的
我如何在这两个类之间平滑地过渡呢？我使用Tailwind进行造型，并尝试将transition-all添加到几乎每个类中，但遗憾的是没有工作。
这是负责在SVG之间切换的代码：

const [hover, setHover] = React.useState(false);

 const handleMouseOver = () => {
    setHover(true);
 };
 const handleMouseLeave = () => {
    setHover(false);
 };

return (
...
   <div className="w-1/2 flex justify-center">
      <Link
        to={getModuleInfo(pathname, t, organization).url}
        className="max-w-fit flex items-center gap-2"
        prefetch="intent"
      >
        <div
          className="flex items-center gap-2"
          onMouseOver={handleMouseOver}
          onMouseLeave={handleMouseLeave}
        >
          <>
             {hover
              ? getModuleInfo(pathname, t, organization).logoHover
              : getModuleInfo(pathname, t, organization).logo}
          </>
          <h5 className="organizations text-md md:text-2xl font-sans font-normal text-center text-colublue-500">
            {getModuleInfo(pathname, t, organization).title}
          </h5>
        </div>
      </Link>
    </div>
...
)

字符串

UPD：为了让事情更清楚，这将是两个SVG示例，我想在它们之间转换：

的
这是<svg>：

// Unfilled SVG
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.41421 2.58579C8.78929 2.21071 9.29799 2 9.82843 2H18C18.5304 2 19.0391 2.21071 19.4142 2.58579C19.7893 2.96086 20 3.46957 20 4V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V7.82843C4 7.29799 4.21071 6.78929 4.58579 6.41421L8.41421 2.58579Z" stroke="#052141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 2V7C10 7.55228 9.55228 8 9 8H4.5" stroke="#052141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

// Filled SVG
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82843 1C9.03278 1 8.26972 1.31607 7.70711 1.87868L3.87868 5.70711C3.31607 6.26972 3 7.03278 3 7.82843V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H18C18.7956 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V4C21 3.20435 20.6839 2.44129 20.1213 1.87868C19.5587 1.31607 18.7956 1 18 1H9.82843ZM16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L11.3738 16.0404C10.9832 16.431 10.3501 16.431 9.95956 16.0404L7.29289 13.3738C6.90237 12.9832 6.90237 12.3501 7.29289 11.9596C7.68342 11.569 8.31658 11.569 8.70711 11.9596L10.6667 13.9191L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289Z" fill="#052141"/>
</svg>

型

css

来源：https://stackoverflow.com/questions/73608068/transition-between-two-svg-react

3条答案

按热度按时间

jdgnovmf1#

使用普通的CSS和SVG，你可以通过不透明度和过渡来做到这一点。

.filled {
  opacity: 0;
  transition: opacity 0.3s;
}

svg:hover .filled {
  opacity: 1;
}

个字符

赞(0）回复(0）举报 4个月前

yh2wf1be2#

你也可以使用css变量在设计状态之间转换。
与@ksav类似，这种方法也需要合并两个svg。
这样我们就可以用更多的设计变化来渲染图标。

let icon = document.querySelector('.iconTrans');

function toggleState() {
  icon.classList.toggle('active')
}

svg {
  border: 1px solid #ccc;
  overflow: visible;
  width: 10em;
}

svg path {
  transition: 1s;
}

.iconTrans {
  --strokeColor: #052141;
  --strokeWidth: 2px;
  --opacity1: 1;
  --opacity2: 0;
  --fillColor: #052141;
}

.active {
  --strokeColor: #052141;
  --strokeWidth: 0px;
  --opacity1: 0;
  --opacity2: 1;
  --fillColor: #ccc;
}

<p><button id="btnToggle" onclick="toggleState()">Toggle state</button></p>
<svg class="iconTrans" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="paper" d="M8.41421 2.58579C8.78929 2.21071 9.29799 2 9.82843 2H18C18.5304 2 19.0391 2.21071 19.4142 2.58579C19.7893 2.96086 20 3.46957 20 4V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V7.82843C4 7.29799 4.21071 6.78929 4.58579 6.41421L8.41421 2.58579Z 
M10 2V7C10 7.55228 9.55228 8 9 8H4.5" style="stroke:var(--strokeColor); stroke-width:var(--strokeWidth); opacity:var(--opacity1)" stroke-linecap="round" stroke-linejoin="round" />
  <path class="paperCheck" d="M9.82843 1C9.03278 1 8.26972 1.31607 7.70711 1.87868L3.87868 5.70711C3.31607 6.26972 3 7.03278 3 7.82843V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H18C18.7956 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V4C21 3.20435 20.6839 2.44129 20.1213 1.87868C19.5587 1.31607 18.7956 1 18 1H9.82843Z
M16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L11.3738 16.0404C10.9832 16.431 10.3501 16.431 9.95956 16.0404L7.29289 13.3738C6.90237 12.9832 6.90237 12.3501 7.29289 11.9596C7.68342 11.569 8.31658 11.569 8.70711 11.9596L10.6667 13.9191L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289Z" style="fill:var(--fillColor); opacity:var(--opacity2); " />
</svg>

赞(0）回复(0）举报 4个月前

wpx232ag3#

我已经发布了an online tool that allows you to automaticaly generate combined SVG files (like @ksav has done) in bulk（source code on GitHub）。
该工具将合并每2个SVG文件（填充和未填充）合并为一个SGV文件，将“未填充”SVG图标的内容添加到<g class="first-icon"></g>中，将“填充”SVG图标的内容添加到<g class="second-icon"></g>中。然后您可以在HTML/CSS中获得悬停效果，如：

svg .first-icon{
    opacity: 1;
    transition: opacity 0.3s;
}
svg .second-icon{
    opacity: 0;
    transition: opacity 0.3s;
}
svg:hover .first-icon{
    opacity: 0;
}
svg:hover .second-icon{
    opacity: 1;
}

个字符

赞(0）回复(0）举报 4个月前

我来回答

css 两个SVGReact之间的过渡

3条答案

相关问题

热门标签

最新问答