Skip to content

CSS attribute containment selector is not recognised

Summary:

In CSS, you can select attributes with a containment operator as specified here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

For example, *[class*="foo"] should reference any element where class contains the value of foo somewhere. However, SVGs containing CSS rules with attribute containment selectors ignore those rules.

Steps to reproduce:

Use this file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="22.188883mm" height="22.188883mm" viewBox="0 0 22.188883 22.188883" version="1.1" id="svg7998" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs>
<style type="text/css"><![CDATA[
*[class*="foo"] { stroke: #0000FF; fill: #FF0000; }
]]></style>
  </defs>
  <g id="layer1" transform="translate(-13.319572,-13.35747)">
    <rect class="foobar" width="21.188883" height="21.188883" x="13.819572" y="13.85747" />
  </g>
</svg>
  • open the SVG in a browser (e.g. firefox, chrome, etc)
  • open the SVG in inkscape

What happened?

In a browser, you will see a red rectangle with a blue border. In Inkscape, you will see a default black rectangle.

What should have happened?

Inkscape should parse the CSS rule and show a red rectangle with a blue border.

Sample attachments:

See above sample.

Version info

Inkscape 1.2.2 (b0a8486541, 2022-12-01)

    GLib version:     2.76.3
    GTK version:      3.24.38
    glibmm version:   2.66.6
    gtkmm version:    3.24.7
    libxml2 version:  2.10.4
    libxslt version:  1.1.37
    Cairo version:    1.17.8
    Pango version:    1.50.14
    HarfBuzz version: 7.3.0

    OS version:       Gentoo Linux
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information