Support setting geometry properties for SVG shapes from the CSS as per the SVG 2 specification

External Issue #11543103

Details

Author
Ana T.
Created
Apr 6, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Expected result

Having the following SVG:

<svg>
 <circle>
</svg>

… and the following CSS:

circle {
 r: 50;
 cx: 65;
 cy: 75;
}

… should produce a circle of radius 50 at 65,75.

Actual result

No circle shows up on the SVG canvas.

Use cases

  1. Avoid duplicating code in between the SVG and CSS when animating things. If I want a self drawing circle, I can set the stroke-dasharray on that circle to be the circle length and then animate the stroke-dashoffset from the same circle length to 0:
circle {
 --circle-len: 314.16px;
 stroke-dasharray: var(--circle-len);
 stroke-dashoffset: var(--circle-len);
 animation: draw 2s linear infinite.
}

@keyframes draw {
 to { stroke-dashoffset: 0 }
}

This works for the following SVG (should work as soon as CSS variables are supported in Edge?)

<svg>
 <circle r='50' cx='65' cy='75'/>
</svg>

Live demo.

But the big problem here is that the circle length I’m using in the CSS depends on the circle radius which I can currently only set in the SVG in Edge. So if I just change the circle radius to let’s say 65 in the SVG, then the CSS animation doesn’t work properly anymore unless I recompute the circle length.

gif showing the problem

Being able to set the circle radius from the CSS would solve this problem:

circle {
    --circle-rad: 50px;
    --circle-len: calc(2*3.1416*var(--circle-rad));
    r: var(--circle-rad);
    stroke-dasharray: var(--circle-len);
    stroke-dashoffset: var(--circle-len);
}

Live demo (working in Chrome)

  1. Animate circle radii, positions or path shapes via CSS, without needing to resort to JavaScript.

Example: animated ☯ (working in Chrome*)

*At this point, the Chrome implementation doesn’t yet follow the final spec for the d property of the path element (issue)

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

    • Hi Ana,

      Appreciate you submitting this detailed bug report.  I have repro’d this in latest insider fast build and with a recent internal build.

      Do you know of a test case for this at w3c or elsewhere?  I found similar test cases but not the same in the css/work-in-progress w3c web-platform-tests.

      http://127.0.0.1:8000/css/work-in-progress/adobe/svg-transform/in_progress/translateY/svg-translatey-064.xht

      Thanks again,

      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “External”

    • Sounds like a feature request to me ;-) Merging with our internal deliverable.

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

    You need to sign in to your Microsoft account to add a comment.

    Sign in