Кажется, я не могу правильно применить простую маску к группе из двух эллипсов (чтобы сделать ее слегка прозрачной) с помощью Inkscape 0.92.4. Результирующее изображение становится полностью прозрачным, а не слегка прозрачным.
Что я сделал:
На этом этапе Inkscape показывает (и экспортирует) изображение по желанию, но другие средства визуализации этого не делают. При импорте SVG в Firefox, Chrome и Gimp не отображается видимое изображение при открытии сохраненного файла SVG, что может быть связано с ошибкой в Inkscape . Если это так, я хотел бы обойти это.
Могу ли я добиться желаемого эффекта другим способом, используя Inkscape?
Полученный XML из шагов выше (drawing.svg), на всякий случай:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16"
height="16"
viewBox="0 0 4.2333332 4.2333335"
version="1.1"
id="svg3281"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="drawing.svg">
<defs
id="defs3275">
<mask
maskUnits="userSpaceOnUse"
id="mask3841">
<rect
style="opacity:1;fill:#9b9b9b;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3843"
width="3.0297153"
height="3.0592449"
x="0.60239953"
y="293.3974" />
</mask>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="44.8"
inkscape:cx="8.4637047"
inkscape:cy="8.0165929"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1337"
inkscape:window-height="924"
inkscape:window-x="2208"
inkscape:window-y="288"
inkscape:window-maximized="0" />
<metadata
id="metadata3278">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="eye"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-292.76665)">
<g
id="g3837"
mask="url(#mask3841)">
<ellipse
ry="1.2431873"
rx="1.2668108"
cy="294.87091"
cx="2.1704102"
id="path3829"
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<ellipse
ry="0.64374065"
rx="0.65850544"
cy="295.25183"
cx="2.3712099"
id="path3831"
style="opacity:1;fill:#f3f3f3;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
</svg>
Иногда Inkscape имеет функциональность SVG, которая еще не поддерживается в браузерах. Это не ошибка Inkscape, это отсутствие поддержки определенных функций SVG в браузерах: обычно эти отсутствующие функции включают в себя такие вещи, как фильтры и эффекты, а также градиентные сетки.
Я бы посоветовал вам попробовать другой подход, чтобы сделать его максимально простым, например, вместо этого уменьшить непрозрачность группы. В приведенном ниже примере я освободил и удалил примененную вами маску, а затем уменьшил непрозрачность заливки группы.
Я тестировал этот подход в Firefox и Chrome. Оба работают нормально.
Билли Керр
преди
Билли Керр