Question

我在嵌入式SVG中有一个图像，当它悬停在SVG上时可以在两个遮罩之间切换。

但是，CSS过渡不适用于transition-property: mask;

是否有其他可以用于CSS过渡的方法？

我也尝试设置<mask>的样式，但是似乎无法对定义元素进行样式设置（？）。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 604px; height: 302px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->
<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1208 604">

	<style type="text/css">
		/* <![CDATA[ */
		.mask_hover a:link,
		.mask_hover a:visited {
			mask: url(#mask_right);
		}
		.mask_hover a:hover,
		.mask_hover a:active {
			transition-property: mask;
			transition-duration: 0.4s;
			transition-timing-function: ease-in-out;
			mask: url(#mask_left);
		}
		/* ]]> */
	</style>

	<defs>
		<mask id="mask_left">
			<circle id="circle_l" cx="416" cy="216" r="202" fill="#fff"/>
		</mask>
		
		<mask id="mask_right">
			<circle id="circle_r" cx="809" cy="337" r="202" fill="#fff"/>
		</mask>
		
	</defs>
	
	<g class="mask_hover">
		<a xlink:href="#">
			<image id="img" width="1208" height="604" xlink:href="https://i.stack.imgur.com/LCpGU.jpg"/>
		</a>
	</g>
</svg>
</div>
</body>
</html>

^{图片来源：Pixabay}

Answer 1

不是import React, { Component } from "react"; import axios from "axios"; class User extends Component { state = { people: [] }; componentDidMount() { axios .get("https://reqres.in/api/users") .then(response => { this.successShow(response); }) .catch(error => { this.successShow(error); }); } successShow(response) { this.setState({ people: response.data.data }); } render() { console.log(this.state.people[0]); //this console log prints this: //{id: 1, first_name: "George", last_name: "Bluth", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"} console.log(this.state.people[1]); //this console log prints this: //{id: 2, first_name: "Janet", last_name: "Weaver", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"} return <div>HOW DO I RENDER A LIST OF ALL THE USERS HERE??</div>; } } export default User;属性不能被设置为动画，而是mask 。

要创建过渡，您需要状态1变为状态2，并可能在两个状态之间创建插值。
当您使用url()并希望转到url(#1)时，由于url(#2)不会处于中间状态，因此无法在这两个状态之间创建任何插值。

可以动画的是面具的内容。

在SVG2中，您可以直接设置CSS中确实发生了更改的属性（即url(#1.5)和cx），但这仅受Blink＆Safari浏览器支持：

cy

对于不支持SVG2此部分的其他浏览器，您应该可以使用transform属性来完成此操作，但是以某种方式，Firefox不接受它。

<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1208 604">
  <style type="text/css">
  /* <![CDATA[ */
    .mask_hover a:link,
    .mask_hover a:visited {
      mask: url(#mask);
    }
    #mask > circle {
      transition-property: cx, cy;
      transition-duration: 0.4s;
      transition-timing-function: ease-in-out;    
    }
    .mask_hover a:hover + defs #mask > circle,
    .mask_hover a:active + defs #mask > circle {
      cx: 416;
      cy: 216;
    }
  /* ]]> */
  </style>
  <g class="mask_hover">
    <a xlink:href="#">
      <image id="img" width="1208" height="604" xlink:href="https://i.stack.imgur.com/LCpGU.jpg"/>
    </a>
    <!-- we need to move it here so we can target it with our CSS rules -->
    <defs>
      <mask id="mask">
        <circle id="circle_l" cx="809" cy="337" r="202"   fill="#fff"/>
      </mask>		
    </defs>
  </g>
</svg>

因此，您可能还想尝试使用SMIL，但是您将无法使用<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1208 604"> <style type="text/css"> /* <![CDATA[ */ .mask_hover a:link, .mask_hover a:visited { mask: url(#mask); } #mask > circle { transition-property: transform; transition-duration: 0.4s; transition-timing-function: ease-in-out; } .mask_hover a:hover + defs #mask > circle, .mask_hover a:active + defs #mask > circle { transform: translate(-393px, -121px); } /* ]]> */ </style> <g class="mask_hover"> <a xlink:href="#"> <image id="img" width="1208" height="604" xlink:href="https://i.stack.imgur.com/LCpGU.jpg"/> </a>  <defs> <mask id="mask"> <circle id="circle_l" cx="809" cy="337" r="202" fill="#fff"/> </mask> </defs> </g> </svg>规则，并且Safari在实现悬停状态方面还是有缺陷的。

:active

因此，最后一种方法可能是仅使用CSS中的<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1208 604"> <style type="text/css"> /* <![CDATA[ */ .mask_hover a:link, .mask_hover a:visited { mask: url(#mask); } /* ]]> */ </style> <defs> <mask id="mask"> <circle id="circle_r" cx="809" cy="337" r="202" fill="#fff"> <animateTransform attributeName="transform" attributeType="XML" type="translate" to="-393 -121" dur="0.4s" fill="freeze" begin="anchor.mouseover"/> <animateTransform attributeName="transform" attributeType="XML" type="translate" to="0 0" dur="0.4s" fill="freeze" begin="anchor.mouseout"/> </circle> </mask> </defs> <g class="mask_hover"> <a xlink:href="#" id="anchor"> <image id="img" width="1208" height="604" xlink:href="https://i.stack.imgur.com/LCpGU.jpg"/> </a> </g> </svg>来实现整个过程：

clip-path

在SVG的蒙版上进行CSS过渡？

1 个答案: