<svg> 掩码在 react.js 中用于显示 svg <image> 时不起作用

Question

当你像这样将鼠标悬停在背景图像上时，我试图让图像显示在背景图像上方...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 属性正确更新。

如有任何帮助，我们将不胜感激。

Answer 1

您似乎错过了样式。只需添加与原始样式相似的样式 fiddle:

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

这里是working fiddle.

<svg> 掩码在 react.js 中用于显示 svg <image> 时不起作用

<svg> mask not working when used to display an svg <image> in react.js

css

jquery

svg

mask

reactjs