hide-if-svg-contains

The hide-if-svg-contains snippet hides any HTML element matching a CSS selector if it contains a SVG image with the given visible text.

Parameters

Name	Description	Mandatory
search	The string to match against the visible text (text that isn't hidden by CSS properties or other means). If the string begins and ends with a slash (/), the text in between is treated as a regular expression.	Yes
selector	The CSS selector that an HTML element must match for it to be hidden.	Yes
searchSelector	The CSS selector that an HTML element containing the given string must match. Defaults to the value of the selector argument.	No
optionalParameters	The CSS attributes a computed style map of a node should have in order to consider the text inside of the image hidden. You can provide any number of optional parameters by following these syntax rules: key:value, where value can be a string or a regex (if it starts and ends with a /) each parameter is wrapped in single quotes, for example: '-position-threshold:500' 'width:0px'	No

Default Parameters

In order to tackle common circumvention patterns, the snippet checks already some styles in the matched element, even if you don't add any optional parameter. You can see the default values in the "Default value" column.

Note that you can override the default parameters by adding them as optional parameter, following the syntax rules explained above. You can give any value, the "How to overwrite" column shows only examples. Adjust the values according to your needs.

Name	Description	Default Value	How to overwrite
-position-threshold	Used to set a threshold around the image root. Any text node that is within this threshold will be counted in the viewport. Any text node outside of this threshold will be counted as "outside of the viewport" and invisible. Unit is in pixels.	-position-threshold:500'	'-position-threshold:10'
-disable-contained-check	Used to disabled the check that counts text that are not contained within the image invisible.	'-disable-contained-check:false'	'-disable-contained-check:true'
display	Used to set the rule that any text node with display: none style will be counted as invisible.	'display:none'	'display:block'
visibility	Used to set the rule that any text node with visibility: hidden style will be counted as invisible.	'visibility:hidden'	'visibility:visible'
opacity	Used to set the rule that any text node with opacity: 0 style will be counted as invisible.	'opacity:0'	'opacity:1'
fill	Used to set the rule that any text node with fill: none style will be counted as invisible.	'fill:none'	'fill:"black"'

Filter examples

Filter	Result
hide-if-svg-contains Sponsored div.parent div.child	Checks all div.child elements that have a background-image. If the element has a background-image and that image contains the visible word "Sponsored" div.parent will be hidden.
hide-if-svg-contains /.*/ li.serp-item 'li.serp-item div.label' 'color:rgb(255, 255, 255)'	Hides any li.serp-item element which has an 'li.serp-item div.label' element inside its subtree whose background-image content matches the /.*/ regex and has a font color that is not white.