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

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

但我似乎无法让它做出反应.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>

和反应.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');
});

我尝试通过在组件 DidMount 中使用 setAttribute 手动设置 mask 属性，但随后<image>消失，鼠标悬停时不会显示。掩码圈似乎没有离开 （0，0），但观察浏览器开发选项中的元素选项卡显示 cx 和 cy 属性正确更新。

任何帮助将不胜感激。

Answer 1

似乎你错过了样式。只需添加与原始小提琴相似的样式：

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

这是一个工作小提琴。