在Firefox中，svg mask不会缩放

Question

使用svg屏蔽图像，但它似乎没有在Firefox中正确缩放。看起来很好的徒步旅行和铬，并有适当的后备，即。

网站。 http://feelfilmsdev.jynk.net

SVG http://feelfilmsdev.jynk.net/wp-content/themes/feel-roots-theme/assets/img/feelfilms-logo.svg

CSS

-webkit-mask: url("../img/feelfilms-logo.svg#logo_mask");
mask: url("../img/feelfilms-logo.svg#logo_mask");
-webkit-mask-image: url(../img/feelfilms-logo.svg) top left / cover;
background-color: #d01d38;
background-blend-mode: multiply;
background-position: 50% 50%;
-webkit-background-size: cover;
background-size: cover;

应该怎么看...

任何想法如何让它正常工作？

这里的pastebin中的SVG。 http://pastebin.com/Va5Kb8dU

Answer 1

使用此计算器计算您对比率版本的所有积分：http://prollygeek.com/svg/calc.html

在此之后你的svg路径应如下所示：

<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 246.059 217.445" enable-background="new 0 0 246.059 217.445" xml:space="preserve">

    <defs>
        <mask id="logo_mask2" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox">

            <path fill="#FFFFFF" d="M0.4998801100549055,0.8250053848873644c-0.21133142864109827,0-0.38608626386354494-0.1706907692870409-0.38608626386354494-0.38608626386354494h-0.016256263741622944c0,0.2235236264473155,0.1788189011578524,0.40234252760516787,0.4064065935405736,0.40234252760516787c0.2235236264473155,0,0.4064065935405736-0.1788189011578524,0.4064065935405736-0.40234252760516787h-0.016256263741622944C0.8859663739184505,0.6502505496649178,0.7112115386960038,0.8250053848873644,0.4998801100549055,0.8250053848873644z,,0.8250053848873644c-0.21133142864109827,0-0.38608626386354494-0.1706907692870409-0.38608626386354494-0.38608626386354494h-0.016256263741622944c0,0.2235236264473155,0.1788189011578524,0.40234252760516787,0.4064065935405736,0.40234252760516787c0.2235236264473155,0,0.4064065935405736-0.1788189011578524,0.4064065935405736-0.40234252760516787h-0.016256263741622944C0.8859663739184505,0.6502505496649178,0.7112115386960038,0.8250053848873644,0.4998801100549055,0.8250053848873644z"/>

        </mask>
    </defs>
</svg>

（之前：

<path d="M123.274,203.551c-52.442,0-95.107-42.662-95.107-95.098h-4.893c0,55.139,44.858,99.991,100,99.991
c55.142,0,100-44.852,100-99.991h-4.893C218.381,160.889,175.713,203.551,123.274,203.551z"/>

）

不要忘记添加'maskContentUnits =“objectBoundingBox”'Robert Longson在他的评论中提到，否则它不会出现。另外，你的路径填充firefox似乎很重要（例如，填充=“＃FFFFFF”，颜色无关紧要）。 Chrome似乎不需要这个。

Answer 2

对于那些仍然想要这个计算器的人来说，它已经回到了我的网站上：

http://prollygeek.com/svg-mask/

这是一个工作示例（在FF上测试）

#test {
  width: 100%;
  height: auto;
  mask: url(#m1);
}

<svg x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250">
  <defs>
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z"
      />
    </mask>
  </defs>
</svg>

<img src="https://placebear.com/g/200/200" id="test" alt="">

如何运作 简单地，计算器将SVG路径中提取的维度除以SVG宽度（或高度，始终使用最高值作为输入），然后打印输出。

示例：

M199.468,0L43.883,1.317C17.289,2.632,2.66,17.106,0,43.423V206.58c0,19.738,15.958,40.789,42.552,43.42
    h163.563c18.619,0,37.235-15.788,43.885-36.84V35.526C250,15.89,227.399,0,199.468,0z M203.456,242.105H90.424v-56.578h78.458
    v-60.526H90.424V75.001h79.787l0.032-66.524l29.961-0.106c22.944,0,41.511,11.853,41.511,24.903l0.304,174.624
    C240.691,228.949,219.415,242.105,203.456,242.105z

等于（响应结果）：

M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z