SVG opacity conflicts with attributify opacity=""

[YunYouJun]

SVG can use opacity="0.7" means opacity: 70%.

It also will parsed by unocss as opacity: 0.007 means opacity: 0.7%.

<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  <defs>
    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" fill="var(--yun-c-cloud)" />
  </defs>
  <g class="parallax">
    <use xlink:href="#gentle-wave" x="48" y="0" opacity="0.7" />
    <use xlink:href="#gentle-wave" x="48" y="7" />
  </g>
</svg>

[sibbng]

I also encountered some false positives in SVGs

Playground

In the playground above, it extracts some margins from path's d attribute and fill attributes.

fill and opacity issues can be fixed temporarily by adding those attributes to ignoreAttributes:

presetAttributify({ignoreAttributes: ['placeholder', 'fill', 'opacity']})

But this will ignore these attributes in other places too, not just SVGs. And d attribute issue is still there.

In my opinion, we should have some special handling for SVGs.

fill and opacity issues can be fixed here:

unocss/packages/preset-attributify/src/extractor.ts

Line 23 in 507303b

extract({ code }) {

d issue can be fixed here:

unocss/packages/core/src/extractors/split.ts

Line 8 in 507303b

export const splitCode = (code: string) => {

My suggested solution is to remove these attributes from the code using regex.

[UltraCakeBakery]

Not sure if this comment (still) applies here: #205 (comment)

[YunYouJun]

Not sure if this comment (still) applies here: #205 (comment)

Thanks. It's a good idea to add namespaces to avoid confusion between unocss and svg attributes.
Unfortunately, this does not prevent svg's inherent properties from being parsed by unocss.

As @sibbng says, we should remove unocss parsing of svg attributes.
But regular expression is really hard for me.