Can't bind a style object with a clip-path string inside

[craigrileyuk]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9UU1P4zAQ/SsjayVaKZum2uWSTSvtrpB2EV8CxAH5QHCGxODYlu2Uoir/nbFLCwfEbTzvzZv3xhv229p8NSArGddVwN6qOuCSa4CqkSsQqvZ+wZkwOtRSo+MMSh9eFFLzXuqGs2U1IyaNVLMP8/T0wkkbwGMYLHVkb40LsAFhejsEbGCEB2d6OKD9B3GClvgAtg4dLICz0yIrTor8MCvy+ck8K27m/4pbzn7tiHE9EXdyk8kUFkuYbKJ5oaS9IKES7qLehLNvm1iMnE3vuB6nU5KpZluLb3ZjKirzfVZIUh3KtgslHBarjoYA7mvx1Doz6Oa7MMq4Ehw2hIxJMamwjAVPOg+yzR+90XTepBUP2Vup0J3bICkFZ+V2S8RqpczzceoFN2C264sOxdMn/Ue/jj3OLhx6dCvkbI+F2rUYtvDR1Rmuqd6DvWkGRewvwEv0Rg3R45b2h+KS7Q+85PZ/+lSp22t/tA6o/S5UNBqZY+JzRn/894vo73Z/5D/THN2Tja/kEN8P

Steps to reproduce

If you inspect the rendered element, you'll see it's got clip-path: path("M 0 0 L 0.5 0.1 L 1 0 V 1 H 0 Z"); with all commas remove, which breaks the functionality.

What is expected?

The clip path to be rendered as written in the code

What is actually happening?

Path is stripped of all commas

System Info

System:
    OS: Linux 5.14 AlmaLinux 9.5 (Teal Serval)
    CPU: (8) x64 Intel Core Processor
    Memory: 7.94 GB / 15.37 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 22.15.0 - /opt/cpanel/ea-nodejs22/bin/node
    npm: 10.9.2 - /opt/cpanel/ea-nodejs22/bin/npm
    pnpm: 9.15.4 - /opt/cpanel/ea-nodejs22/bin/pnpm

Any additional comments?

No response

[rijenkii]

Minimal reproduction:

<template>
  <div :style="{ clipPath: `path('M0,0L0.5,0.1L1,0V1H0Z')` }"></div>
</template>

Generated HTML:

<div style="clip-path: path(&quot;M 0 0 L 0.5 0.1 L 1 0 V 1 H 0 Z&quot;);"></div>

Playground

[Justineo]

IIRC, commas in SVG paths are optional and can be omitted/replaced with spaces.

[rijenkii]

That seems to be correct. SVG 1.1 spec describes a comma-wsp separator for SVG paths, that is defined as

comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","

So in SVG paths a single space is equivalent to a single comma.

Also paths from the reproduction form the exact same shape, see M0,0L0.5,0.1L1,0V1H0Z and M 0 0 L 0.5 0.1 L 1 0 V 1 H 0 Z.