css - 在 Firefox 中，svg 掩码不缩放

Question

使用 svg 来屏蔽图像，但它似乎无法在 firefox 中正确缩放。在 safari 和 chrome 中看起来不错，并且有适合 ie 的后备。

网站。 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"/>

)

不要忘记添加 Robert Longson 在他的评论中提到的 'maskContentUnits="objectBoundingBox"'，否则它不会显示。此外，在 firefox 中填充路径似乎很重要(例如 fill="#FFFFFF"，颜色无关紧要)。 Chrome 似乎不需要这个。