Question

Я использую SVG-фильтр с feFlood для маскировки графики за перекрывающимся текстом. SVG создается программно с использованием GWT / Java. Работает, пока не нажата кнопка загрузки. Хотя нажатие кнопки загрузки не влияет на SVG, фильтр исчезает на экране после нажатия на него. Скачанный SVG работает, как и ожидалось!

Я разрабатываю онлайн-приложение для рисования химиков для рисования молекул. Технический стек включает в себя GWT / Java 1.8 и GWT Material Design. Приложение создает SVG программно и позволяет пользователям загружать чертежи в формате SVG.

Изначально я игнорировал элементы defs и feComposite. Столкнувшись с этими проблемами, я добавил их, но без разрешения.

Я попытался добавить белый круг за текстом, и он работает даже после загрузки. Но это не чистое решение, хотя.

Перед добавлением текста:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    shape-rendering="geometricPrecision" height="291" width="391">
    <g id="drawing" 
        style="stroke-linecap:round;stroke-linejoin:round;stroke:BLACK;stroke-width:4.6875;fill:NONE">
        <line x1="129" y1="86" x2="174" y2="86"></line>
    </g>
</svg>

После добавления текста (этот код идентичен до и после нажатия кнопки загрузки):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    shape-rendering="geometricPrecision" height="291" width="391">
    <g id="drawing" 
        style="stroke-linecap:round;stroke-linejoin:round;stroke:BLACK;stroke-width:4.6875;fill:NONE">
        <line x1="129" y1="86" x2="174" y2="86"></line>
    </g>
    <g style="font-family:Helvetica,Arial;fill:BLACK;font-size:23.4375px;stroke:none;stroke-width:0;
        font-style:normal;font-weight:normal;text-anchor:middle">
        <filter id="whiteBackgroundFilter" x="0" y="0" width="1" height="1"> 
            <feFlood flood-color="#FFFFFF"></feFlood>
        </filter>
        <use xlink:href="#54676022" filter="url(#whiteBackgroundFilter)"></use>
        <text id="54676022" x="174" y="86">
            <tspan style="alignment-baseline:middle">O</tspan>
        </text>
    </g>
</svg>

Скачанная версия:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    height="291" shape-rendering="geometricPrecision" version="1.1" width="391">
    <g id="drawing" 
        style="stroke-linecap:round;stroke-linejoin:round;stroke:BLACK;stroke-width:4.6875;fill:NONE">
        <line x1="129" x2="174" y1="86" y2="86"/>
    </g>
    <g style="font-family:Helvetica,Arial;fill:BLACK;font-size:23.4375px;stroke:none;stroke-width:0;
        font-style:normal;font-weight:normal;text-anchor:middle">
        <filter height="1" id="whiteBackgroundFilter" width="1" x="0" y="0"> 
        <feFlood flood-color="#FFFFFF"/>
        </filter>
        <use filter="url(#whiteBackgroundFilter)" xlink:href="#54676022"/>
        <text id="54676022" x="174" y="86">
            <tspan style="alignment-baseline:middle">O</tspan>
        </text>
    </g>
</svg>

См. Приложения: