How to make <CSS transition> work for external-svg-sprites and css-variable?

Question

TL;DR

Having created symbol-svg-sprite and inserting its fragment using svg+use, I want to use css-variables inside #ShadowDOM for SVG presentation attributes to change for example stroke-width="0" in stroke-width="5", and the transition property must work, the problem is that the stroke-width values work at any event (:hover :active :focus) and transition does not.

---

External SVG sample

<svg style='display:none;' xmlns="http://www.w3.org/2000/svg">
    <symbol id='symbol-id' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20">
        <path style='transition-duration: var(--custom-duration); transition-property: var(--custom-property);' stroke="var(--custom-stroke)" stroke-width="var(--custom-stroke-width)" fill="cyan" d="long..."
    </symbol>
</svg>

Insert SVG+USE

<svg>
    <use class="use-class" xlink:href="../transition-error.svg#symbol-id"></use>
</svg>

Applied CSS style

svg
    outline 1px solid black
    width 250px
    height 250px

.use-class
    --custom-stroke-width 0
    --custom-duration .5s
    --custom-property all

.use-class:hover
    --custom-stroke-width 2
    --custom-stroke blue
    --custom-duration 2500ms
    --custom-property all

Expected behavior

When you hover the svg container, the values of the variables change and stroke stroke-width 0 smoothly flows into stroke-width 2 — this happens but without transition although transition assigned to <path> this can be seen in DevTools

Where does this work?

1. Inline svg through tag <svg> — <svg> <path d="..."> </svg>
2. Using tag <object></object> with external css

Demonstration can be seen on CodePen

https://codepen.io/Cloudesign/pen/bLaEWg

---

How to make CSS transition work for external-svg-sprites? I'm tired of fighting this :(

Answer 1

update As of September 2018, this still does not work everywhere except Firefox

Having carried out researches, it is revealed that this behavior is a bug.

At the moment on March 11, 2018 in the tested by me browsers under Windows 7, namely:

1. Chrome 64.0.3282.186 stable (64 bit)
2. Chrome 67.0.3368.0 canary (64 bit)
3. Vivaldi 1.14.1077.55 stable (32 bit)
4. Opera 51.0.2830.55 stable (64 bit)
5. Microsoft Edge 41.16 16 (undefine)

Does not work and is an ERROR

With the exception of

1. Firefox Version 60.0a1 nightly (64 bit) and in older versions 58.0.2 (64 bit)

I would be grateful to those who supplement information on the state of work in:

• Safari
• macOS
• others...