<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 手动设置 mask 属性，但随后 <image> 消失并且鼠标悬停时不会显示。看起来遮罩圈没有离开 (0,0)，但在我的浏览器的 dev 选项中查看元素选项卡显示 cx 和 cy 属性正确更新。

任何帮助将不胜感激。

Answer 1

看来您错过了样式。只需添加与原始小提琴中相似的样式即可：

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

这是working fiddle。