Почему не работает маска mask?
Почему не работает маска (mask)?
<svg width='400' height='400' style='border: 1px solid black'>
<defs>
<mask id="myclipPath">
<g>
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 70.114582,68.513393 C 67.266994,68.274055 63.433767,68.316329 57.074405,69.080355 40.395342,79.744772 44.107798,86.089283 43.089284,94.593747 c 3.495006,7.671423 7.248173,15.007243 15.686014,16.252983 3.665113,2.00087 16.851511,4.41205 24.75744,-10.01638 5.143422,-8.235038 3.138304,-15.629071 -0.188989,-22.867554 -3.606131,-4.489121 -8.112417,-7.477981 -13.229167,-9.449403 z"
id="path21"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 39.471929,63.835307 c 5.059996,-2.995747 10.764422,-3.978053 15.706499,-4.30535 4.942077,-0.327296 9.121861,3.48e-4 14.672717,3.113847 5.550856,3.113499 12.472856,9.012728 15.415671,16.206717 2.942815,7.193989 1.90622,15.68215 -0.232787,22.039899 -2.139008,6.35774 -5.380112,10.58376 -9.530997,13.62055 -4.150885,3.03679 -9.21029,4.88323 -14.165941,5.90116 -4.955652,1.01793 -9.805885,1.2069 -15.92227,-1.63058 -6.116384,-2.83747 -13.497441,-8.70097 -17.012265,-14.31648 -3.514824,-5.615508 -3.163024,-10.982331 -2.988907,-15.543419 0.174117,-4.561089 0.170567,-8.316419 2.376671,-12.6988 2.206104,-4.382381 6.621613,-9.391796 11.681609,-12.387544 z"
id="path23"
inkscape:connector-curvature="0"
inkscape:path-effect="#path-effect25"
inkscape:original-d="m 38.827197,61.821918 c 5.704691,-0.982571 11.409117,-1.964877 17.11328,-2.946919 4.18005,0.327378 8.359834,0.655022 12.539355,0.98293 6.922411,5.89909 13.844411,11.79832 20.766437,17.698061 -1.03641,8.488548 -2.073005,16.976709 -3.109958,25.46591 -3.241251,4.22629 -6.482354,8.45231 -9.724205,12.67922 -5.060013,1.84649 -10.119417,3.69293 -15.179964,5.53995 -4.850713,0.18873 -9.700946,0.3777 -14.552084,0.56696 -7.38139,-5.86424 -14.762447,-11.72774 -22.14415,-17.59128 0.35207,-5.367172 0.70387,-10.733995 1.055408,-16.100593 -0.0033,-3.755595 -0.0068,-7.510925 -0.01065,-11.26599 4.415775,-5.009682 8.831284,-10.019097 13.24653,-15.028249 z"
sodipodi:nodetypes="cccccccccccc" />
</g>
</mask >
</defs>
<circle mask="url(#myclipPath)" cx='200' cy='200' r="100" cx="0%" cy="0%" fill="green"/>
</svg>Ответы (3 шт):
Автор решения: MaximLensky
→ Ссылка
Поскольку белый цвет даёт полную прозрачность то надо в самый верх в маску положить квадрат со 100% шириной и высотой белого цвета
<svg width='400' height='400' style='border: 1px solid black'>
<defs>
<mask id="myclipPath">
<rect width="100%" height="100%" fill="#fff"/>
<g>
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 70.114582,68.513393 C 67.266994,68.274055 63.433767,68.316329 57.074405,69.080355 40.395342,79.744772 44.107798,86.089283 43.089284,94.593747 c 3.495006,7.671423 7.248173,15.007243 15.686014,16.252983 3.665113,2.00087 16.851511,4.41205 24.75744,-10.01638 5.143422,-8.235038 3.138304,-15.629071 -0.188989,-22.867554 -3.606131,-4.489121 -8.112417,-7.477981 -13.229167,-9.449403 z"
id="path21"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 39.471929,63.835307 c 5.059996,-2.995747 10.764422,-3.978053 15.706499,-4.30535 4.942077,-0.327296 9.121861,3.48e-4 14.672717,3.113847 5.550856,3.113499 12.472856,9.012728 15.415671,16.206717 2.942815,7.193989 1.90622,15.68215 -0.232787,22.039899 -2.139008,6.35774 -5.380112,10.58376 -9.530997,13.62055 -4.150885,3.03679 -9.21029,4.88323 -14.165941,5.90116 -4.955652,1.01793 -9.805885,1.2069 -15.92227,-1.63058 -6.116384,-2.83747 -13.497441,-8.70097 -17.012265,-14.31648 -3.514824,-5.615508 -3.163024,-10.982331 -2.988907,-15.543419 0.174117,-4.561089 0.170567,-8.316419 2.376671,-12.6988 2.206104,-4.382381 6.621613,-9.391796 11.681609,-12.387544 z"
id="path23"
inkscape:connector-curvature="0"
inkscape:path-effect="#path-effect25"
inkscape:original-d="m 38.827197,61.821918 c 5.704691,-0.982571 11.409117,-1.964877 17.11328,-2.946919 4.18005,0.327378 8.359834,0.655022 12.539355,0.98293 6.922411,5.89909 13.844411,11.79832 20.766437,17.698061 -1.03641,8.488548 -2.073005,16.976709 -3.109958,25.46591 -3.241251,4.22629 -6.482354,8.45231 -9.724205,12.67922 -5.060013,1.84649 -10.119417,3.69293 -15.179964,5.53995 -4.850713,0.18873 -9.700946,0.3777 -14.552084,0.56696 -7.38139,-5.86424 -14.762447,-11.72774 -22.14415,-17.59128 0.35207,-5.367172 0.70387,-10.733995 1.055408,-16.100593 -0.0033,-3.755595 -0.0068,-7.510925 -0.01065,-11.26599 4.415775,-5.009682 8.831284,-10.019097 13.24653,-15.028249 z"
sodipodi:nodetypes="cccccccccccc" />
</g>
</mask >
</defs>
<circle mask="url(#myclipPath)" cx='200' cy='200' r="100" cx="0%" cy="0%" fill="green"/>
</svg>И кстати вот эти служебные inkscape команды генерировать не обязательно и если их не генерить мы получим вот такой код
<svg width='400' height='400' xmlns="http://www.w3.org/2000/svg" style='border: 1px solid black'>
<defs>
<mask id="myclipPath">
<rect width="100%" height="100%" fill="#fff"/>
<g>
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 70.114582,68.513393 C 67.266994,68.274055 63.433767,68.316329 57.074405,69.080355 40.395342,79.744772 44.107798,86.089283 43.089284,94.593747 c 3.495006,7.671423 7.248173,15.007243 15.686014,16.252983 3.665113,2.00087 16.851511,4.41205 24.75744,-10.01638 5.143422,-8.235038 3.138304,-15.629071 -0.188989,-22.867554 -3.606131,-4.489121 -8.112417,-7.477981 -13.229167,-9.449403 z" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 39.471929,63.835307 c 5.059996,-2.995747 10.764422,-3.978053 15.706499,-4.30535 4.942077,-0.327296 9.121861,3.48e-4 14.672717,3.113847 5.550856,3.113499 12.472856,9.012728 15.415671,16.206717 2.942815,7.193989 1.90622,15.68215 -0.232787,22.039899 -2.139008,6.35774 -5.380112,10.58376 -9.530997,13.62055 -4.150885,3.03679 -9.21029,4.88323 -14.165941,5.90116 -4.955652,1.01793 -9.805885,1.2069 -15.92227,-1.63058 -6.116384,-2.83747 -13.497441,-8.70097 -17.012265,-14.31648 -3.514824,-5.615508 -3.163024,-10.982331 -2.988907,-15.543419 0.174117,-4.561089 0.170567,-8.316419 2.376671,-12.6988 2.206104,-4.382381 6.621613,-9.391796 11.681609,-12.387544 z"/>
</g>
</mask >
</defs>
<circle mask="url(#myclipPath)" cx='200' cy='200' r="100" cx="0%" cy="0%" fill="green"/>
</svg>И надо поставить в настройках флажок что бы в генерацию обязательно был включен вьюбокс , но на всякий случай даю ссылку на список : https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
Автор решения: Alexandr_TT
Для примеров будет использовано исходное изображение
→ Ссылка
На вопрос почему не работает маска уже ответил @MaximLensky. Нужно было применить fill="white"
Я хочу более подробно рассмотреть механизм работы масок.
Для примеров будет использовано исходное изображение
Маска - mask более сложный инструмент для понимания, чем clipPath, но более мощное средство для оформления веб страничек.
Во-первых, она может работать в режиме clipPath, когда обрезается всё, кроме внутреннего пространства, ограниченного элементами SVG, прописанными внутри маски.
Другими словами, если в маску, включена например окружность, то будет сохранено всё, что находится внутри окружности, остальное будет вырезано.
"Элементы маски можно закрашивать любыми цветами.
В основном применяют: fill="black", что делает маску полностью прозрачной и мы можем увидеть нижний слой, который находится под изображением. То есть представьте изображение, в котором вырезали отверстие и смотрите сквозь него.
При fill="white" участок маски становится полностью непрозрачным (в изображении не вырезается отверстие) и мы видим круглое изображение. То есть, точно также, если бы мы применили к изображению clipPath с круглой формой.
Пример работы маски в режиме clipPath
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="350" height="350" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="300" cy="265" rx="185" ry="240" />
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>2. Вся маска закрашена белым цветом - fill="white".
Поэтому исходное изображение остается без изменений
Эллипс в маске закрашен в чёрный цвет - fill="black" , поэтому изображение в этом месте вырезается и становится виден сквозь отверстие background или другое изображение, если оно расположено ниже первого изображения.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён ,белый цвет маски, поэтому всё пространство вне эллипса становится видимым -->
<rect width="100%" height="100%" fill="white" />
<!-- К эллипсу применен черный цвет маски, поэтому на этом участке изображение вырезается в форме эллипса и становится виден нижний слой background -->
<g fill="black" >
<ellipse cx="300" cy="265" rx="185" ry="240" />
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>Более подробно и больше примеров можно посмотреть здесь
3. Ко всему изображению применён красный цвет маски, поэтому всё пространство вне эллипса становится полупрозрачным
Применение любого цвета закраски маски в диапазоне от черного до белого цвета, придаёт маске полупрозрачность. Большая или меньшая прозрачность зависит от выбора цвета.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, поэтому всё пространство вне эллипса становится полупрозрачным -->
<rect width="100%" height="100%" fill="red" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="300" cy="265" rx="185" ry="240" />
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>4. В качестве фона использовано второе изображение
Это изображение будет видно сквозь отверстие, которое вырезает маска (fill="black") в первом изображении. Остальная часть изображения, к которому применена маска остается без изменения, так как эта часть закрашена - fill="white"
В качестве фона выбрано изображение недовольного льва
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, поэтому всё пространство вне элипса становится полупрозрачным -->
<rect width="100%" height="100%" fill="white" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="black" >
<ellipse cx="300" cy="265" rx="185" ry="240" />
</g>
</mask>
</defs>
<!-- Фоновое изображение льва, которое видно, через отверстие прорезанное маской -->
<image xlink:href="https://i.stack.imgur.com/T5UFF.jpg" opacity="1" x="-60" y="-40" width="160%" height="160%" />
<!-- К изображению девушки применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>5. Форма вырезаемого отверстия может быть любой, например очки
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён практически чёрный цвет маски, что делает эту часть изображения едва видной -->
<rect width="100%" height="100%" fill="#111111" />
<!-- К эллипсам применен белый цвет маски, поэтому на этих участках сохранено оригинальное изображение глаз -->
<g fill="white" >
<!-- Left eye -->
<ellipse cx="365" cy="245" rx="55" ry="45" />
<!-- Right eye -->
<ellipse cx="205" cy="245" rx="55" ry="45" />
<path d="m257.4 230.1c13.2 4.3 18.2 13.7 28.8 13.6 10.1-0.1 18.1-10.5 27-13.6-2.7 8.9-2.8 10.5-3 15.9-0.1 2.3-0.1 1 0.7 6.9-10-4-10.5-7-24.6-0.3-15.1 0.3-11.5-9.8-27.3 0.3 0.6-2.6 1.3-4.6 1.3-7 0-5.4-2.2-10.7-2.9-15.9z"/>
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>Пример анимации маски
Вращать будем stroke-dasharray выреза маски
<ellipse cx="295" cy="265" rx="260" ry="260" stroke-width="60"
stroke-dasharray="272" stroke="red" >
<!-- Анимация вращения строки -->
<animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="1632;0" repeatCount="1" />
</ellipse>
Анимация начнется после клика по изображению
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, что делает его полупрозрачным -->
<rect width="100%" height="100%" fill="red" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="295" cy="265" rx="260" ry="260" stroke-width="60"
stroke-dasharray="272" stroke="red" >
<!-- Анимация вращения строки -->
<animate attributeName="stroke-dashoffset" begin="svg1.click" dur="8s" values="1632;0;1632" repeatCount="10" />
</ellipse>
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
Автор решения: Alexandr_TT
→ Ссылка
Примеры анимации вращения маски SVG +JS
1. Остановка вращения по клику и снова вращение по повторному клику
var svg1 = document.getElementById("svg1"),
start = document.getElementById('start'),
stop = document.getElementById("stop");
let flag = true;
svg1.addEventListener('click', function() {
if (flag == true) {
start.beginElement();
flag = false;
} else {
stop.beginElement();
flag = true;
}
});<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, что делает его полупрозрачным -->
<rect width="100%" height="100%" fill="red" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="295" cy="265" rx="260" ry="260" stroke-width="60"
stroke-dasharray="272" stroke="red" >
<!-- Анимация вращения строки -->
<animate id="start" attributeName="stroke-dashoffset" begin="indefinite" dur="8s"
values="1632;0;1632" repeatCount="10" />
<animate id="stop" attributeName="stroke-dashoffset" begin="indefinite" dur="8s"
values="1632" repeatCount="10" />
</ellipse>
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg> 2. Вращение вперед-назад при повторных кликах
var svg1 = document.getElementById("svg1"),
start = document.getElementById('start'),
stop = document.getElementById("stop");
let flag = true;
svg1.addEventListener('click', function() {
if (flag == true) {
start.beginElement();
flag = false;
} else {
stop.beginElement();
flag = true;
}
});<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, что делает его полупрозрачным -->
<rect width="100%" height="100%" fill="red" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="295" cy="265" rx="260" ry="260" stroke-width="60"
stroke-dasharray="272" stroke="red" >
<!-- Анимация вращения строки -->
<animate id="start" attributeName="stroke-dashoffset" begin="indefinite" dur="8s"
values="1632;0" repeatCount="10" />
<animate id="stop" attributeName="stroke-dashoffset" begin="indefinite" dur="8s"
values="0;1632" repeatCount="10" />
</ellipse>
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>3. Пуск и остановка вращения маски без JS
Для запуска анимации применяется команда:
<animate id="start" attributeName="stroke-dashoffset" begin="img1.mouseover"
Для остановки: end="img1.mouseout"
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk1">
<!-- Ко всему изображению применён красный цвет маски, что делает его полупрозрачным -->
<rect width="100%" height="100%" fill="red" />
<!-- К эллипсу применен белый цвет маски, поэтому на этом участке цвет остается неизменным от оригинального изображения -->
<g fill="white" >
<ellipse cx="295" cy="265" rx="260" ry="260" stroke-width="120"
stroke-dasharray="136" stroke="black" >
<!-- Анимация вращения строки -->
<animate id="start" attributeName="stroke-dashoffset" begin="img1.mouseover" end="img1.mouseout" dur="4s"
values="1632;0;1632" repeatCount="10" />
</ellipse>
</g>
</mask>
</defs>
<!-- К изображению применена маска -->
<image id="img1" xlink:href="https://i.stack.imgur.com/FscZt.jpg" y="-30" x="-10" width="100%" height="100%" mask="url(#msk1)" />
</svg>