7

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 :(

Cloudesign
  • 81
  • 5
  • CSS styles only apply to the document they are in. So the Applied CSS styles would need to be in the external document. – Robert Longson Feb 17 '18 at 06:48
  • I didn't quite understand why you mentioned `CSS-style`, if `CSS-variables` seep through `` and work properly. **In addition, only `transition` does not work**, and all other `CSS-variables` work. Here that those not that, could you clarify your answer? – Cloudesign Feb 19 '18 at 08:59
  • 1
    codepen works in **firefox 58.0.2 (64-bit)**, Does not work in Microsoft Edge 41.16 – Persijn Mar 11 '18 at 14:31

1 Answers1

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)

enter image description here

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

  • Safari
  • macOS
  • others...
Cloudesign
  • 81
  • 5