Jquery <；svg>；用于显示svg时遮罩不工作<；图像>；在react.js中

我正试图让一个图像出现在背景图像上方，当你像这样将鼠标滑过它时

但我似乎无法让它在react.js中工作，它就是这样出来的

还有react.js 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');
});

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');
});

var Hello=React.createClass({
render:function（）{
返回
;
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
var mask1=$（“#mask1圆”）[0]；
$（'.pic'）.mousemove（函数（事件）{
event.preventDefault（）；
var upX=event.clientX；
var upY=event.clientY；
控制台日志（upX，upY）；
setAttribute（“cy”，（upY-5）+“px”）；
setAttribute（“cx”，（upX）+“px”）；
});

我尝试过在componentDidMount中使用setAttribute手动设置掩码属性，但是

会消失，鼠标悬停时不会显示。遮罩圆似乎没有离开（0,0），但观察我的浏览器的“开发选项”中的“元素”选项卡会显示cx和cy属性正在正确更新

---

任何帮助都将不胜感激。

您似乎错过了这些款式。只需添加与原始小提琴相似的风格：

.pic {
  position: absolute;
  height: 250px;
  top: 0;
}

---

这是一个。

这是我将javascript移动到componentDidMount后的提琴。。。

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');
});

.pic {
  position: absolute;
  height: 250px;
  top: 0;
}