小编Sal*_*rbu的帖子

我正在尝试使用外部 SVG 图像来掩盖内容，如下所示：

#homepage-banner .desktop-slider.masked {
  -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */
  mask: url(news-panel-mask.svg#mask); /* Firefox */
}

news-panel-mask.svg 文件具有以下内容：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1170px" height="494px" viewBox="0 0 1170 494" enable-background="new 0 0 1170 494" xml:space="preserve">
  <defs>
    <mask id="mask" maskUnits="userSpaceOnUse">
      <path fill="white" d="M1170.001,494V0h-352v141.605c0,2.2-0.521,5.274-2.075,6.832l-21.725,21.393c-1.554,1.557-3.2,4.631-3.2,6.832v131.692
    c0,2.2,2.021,5.274,3.575,6.832l20.975,21.393c1.554,1.557,2.45,4.631,2.45,6.831V494H1170.001z"/>
    </mask>
  </defs>
</svg>

这适用于 Firefox，但我需要删除svg 文件中的<defs>和<mask>标签才能使其在 Chrome 上工作。有没有办法解决这个问题，以便我可以在两个浏览器中使用相同的 svg 文件？

感谢您的帮助。

我想将 SASS 变量（这是一个映射值）除以二，如下所示：

$grid-gutter-widths: (
  xs:  30px,
  sm:  30px
  ...
);

$col-padding-xs:  #{map-get($grid-gutter-widths, xs)/2}; // returns 15px

div {
  padding-right: $col-padding-xs / 2; // returns 15px/2
}

不幸的是，我期望padding-rightvalue 是7.5px，但是它不执行除法，而是返回中间带有斜杠的字符串。然而这似乎有效：

$col-padding-xs: 15px;

div {
  padding-right: $col-padding-xs / 2; // returns 7.5px
}

所以map值一定是错误的类型。有没有一种简单的方法将其转换为数字，以便我可以在 SASS 中对其进行简单的数学运算？

感谢您的帮助！

我正在使用Pixi JS并通过一个简单的事件处理程序检测鼠标位置：

...

var stage = new PIXI.Container();
stage.interactive = true;

var handler = function(e){
  mouseX = renderer.plugins.interaction.mouse.global.x;
  mouseY = renderer.plugins.interaction.mouse.global.y;
}

stage.on("pointermove", handler);

...

但是，当鼠标位于舞台边界（页面上的元素）之外时，mouseX和会被更新。是否可以将活动限制在舞台内？mouseY<canvas>mousemove

我已经尝试过stage.hitArea，但没有成功。