проблемы с «маской» в firefox

Я нахожусь в конце моей веревки. Эта «маска» должна работать правильно? Ну, я начинаю сомневаться. Мой пример: http://50.63.191.172/mask.html.проблемы с «маской» в firefox

Я действительно не знаю, что еще я мог попробовать. У меня есть некоторые ограничения:

Я хотел бы иметь внешний svg для любой таблицы стилей html page/css, потому что он будет использоваться из нескольких мест.
Я хотел бы иметь svg не размер предопределенный, потому что я не хочу иметь несколько версий для разных размеров; должен быть только один, так что он может кэшироваться браузерами.
У меня не может быть изображения внутри svg. Svg - это стиль, который применяется к любому потенциальному изображению.

Я пробовал несколько способов сделать эту работу, но пока не повезло. Он отлично работает в Chrome/Safari, используя свойство '-webkit-mask'. У меня был «некоторый» успех с firefox и «mask», если я укажу ширину и высоту маскирующего прямоугольника в абсолютных пикселях, но не на 100%. Является ли то, что я хочу даже выполнимо (маска автомасштабирования в firefox)? Если да, чего мне не хватает?

Отказоустойчивая часть, иногда, если я продолжаю перезагружать страницу, изображения отображаются без маски, только для их удаления сразу после завершения отображения.

Вот мой SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <mask id="c1"> 
    <g id="group"> 
    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
     <stop stop-color="white" offset="0"/> 
     <stop stop-color="white" stop-opacity="0" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" /> 
    </g> 
    </mask> 
</defs> 
<use xlink:href="#group"/> 
</svg>

И это мой HTML/CSS объединены:

<html lang="en"> 
<head> 
<meta charset=utf-8> 
<title>Testing mask in various browsers</title> 
<style> 
    .masked { 
    mask: url(mask.svg#c1); /*Firefox */ 
    -webkit-mask: url('mask.svg'); /*Chrome, Safari */ 
    } 
    .nob { 
    border: none; 
    outline: none; 
    } 
    div.stage { position: relative; } 
.inline 
{ 
    display: inline-block; 
} 
span.stage 
{ 
    background-repeat: no-repeat; 
    background-position: center; 
    display: inline-block; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
    .big { width:600px; height:588px; } 
    .normal { width:300px; height:294px; } 
    .small { width:150px; height:147px; } 
</style> 
</head> 
<body style="background-image: url(background.gif);"> 
<div class="stage inline big"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a> 
</div> 
<div class="stage inline normal"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a> 
</div> 
<div class="stage inline small"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a> 
</div> 
</body> 
</html>

Что мне не хватает?

источник

2013-05-25 user2419361

Оказывается, FF не делает процентов. Вместо этого ему нравится работать в единицах objectBoundingBox между 0 и 1. Ну, Chrome/Safari это не нравится. Но есть способ разделить разницу. Вот моя текущая текущая версия, которую я буду стремиться к оптимизации следующего.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <g id="group1"> 
     <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="1" height="1" fill="url(#g1)" /> 
     </g> 
    </mask> 
    <mask id="c2"> 
     <g id="group2"> 
     <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" /> 
     </g> 
    </mask> 
    </defs> 
    <use xlink:href="#group2"/> 
</svg>

Так она идет, она может быть сделана.

источник

2013-05-29 04:42:23 user2419361

Проблемы с этим тоже. Как именно вы получили возможность работать с firefox и один для других браузеров? D. – v3nt

ответ

Смежные вопросы