I wrote a custom SVG filter to draw strokes around text and icons. The filter is then referred in the CSS stylesheet. The following code renders as expected in Chrome and Firefox, but it hides the content entirely on Safari.
Did I miss anything in the filter definition?
.text {
font-family: sans-serif;
font-weight: 700;
font-size: 3rem;
filter: url(#filter);
color: #0044aa;
}
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feMorphology operator="dilate" radius="3 3" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology"/>
<feFlood flood-color="#ff8822" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood"/>
<feComposite in="flood" in2="morphology" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
<feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
<feMergeNode in="composite2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<div class="text">
Lorem ipsum
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKAgMAAAAfnkwQAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///8kUmQkUmTp7WYpAAAAA3RSTlMAu//QRVwgAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M0BrLToAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8xMi8xMKNAeX0AAAAnSURBVAiZY2BgDGFgYEhhEHWcwiDA5sIgIMnAICACxAwOcCwa6gAATVoD5WIuD5EAAAAASUVORK5CYII=" />
</div>
Removing all the x
, y
, width
, and height
attributes from the filter nodes did the trick. Thanks @Kaiido for the comment!
.text {
font-family: sans-serif;
font-weight: 700;
font-size: 3rem;
filter: url(#filter);
color: #0044aa;
}
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
<filter id="filter" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feMorphology operator="dilate" radius="3 3" in="SourceGraphic" result="morphology"/>
<feFlood flood-color="#ff8822" flood-opacity="1" result="flood"/>
<feComposite in="flood" in2="morphology" operator="in" result="composite2"/>
<feMerge result="merge">
<feMergeNode in="composite2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<div class="text">
Lorem ipsum
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKAgMAAAAfnkwQAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///8kUmQkUmTp7WYpAAAAA3RSTlMAu//QRVwgAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M0BrLToAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8xMi8xMKNAeX0AAAAnSURBVAiZY2BgDGFgYEhhEHWcwiDA5sIgIMnAICACxAwOcCwa6gAATVoD5WIuD5EAAAAASUVORK5CYII="
/>
</div>