当您像这样将鼠标悬停在背景图像上时,我试图让图像显示在背景图像上方... https://jsfiddle.net/12zqhqod/7/
<img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB.jpg" />
<div class="pic">
<svg class="blur" width="100%" height="100%">
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="40" fill="white" />
</mask>
<image mask="url(#mask1)" id="bird" alt="follow me" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
</svg>
</div>
和 javascript...
var mask1 = $('#mask1 circle')[0];
$('.pic').mousemove(function(event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
console.log(upX, upY);
mask1.setAttribute("cy", (upY - 5) + 'px');
mask1.setAttribute("cx", (upX) + 'px');
});
但我似乎无法让它在 react.js 中工作,结果就像这样... https://jsfiddle.net/69z2wepo/32320/
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
和 react.js javascript...
var Hello = React.createClass({
render: function() {
return <div>
<img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB.jpg" />
<div className="pic">
<svg className="layers" width="100%" height="100%">
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="40" fill="white" />
</mask>
<image className="imageTest" mask="url(#mask1)" alt="follow me" xlinkHref="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
</svg>
</div>
</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
var mask1 = $('#mask1 circle')[0];
$('.pic').mousemove(function(event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
console.log(upX, upY);
mask1.setAttribute("cy", (upY - 5) + 'px');
mask1.setAttribute("cx", (upX) + 'px');
});
我曾尝试使用 componentDidMount 中的 setAttribute 手动设置掩码属性,但随后 <image>
鼠标悬停时消失并且不会显示。似乎掩码圆圈没有离开 (0,0),但在我的浏览器的开发选项中观察元素选项卡显示 cx 和 cy 属性正确更新。
如有任何帮助,我们将不胜感激。
最佳答案
似乎您错过了样式。只需添加与原始 fiddle 中的样式相似的样式即可:
.pic {
position: absolute;
height: 250px;
top: 0;
}
这是一个working fiddle .
关于jquery - <svg> 掩码在用于在 react.js 中显示 svg <image> 时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35566749/