Welcome, Guest

Author Topic: SVG stroke-dasharray property support ?  (Read 849 times)

Fa

  • Posts: 7
    • View Profile
SVG stroke-dasharray property support ?
« on: December 04, 2017, 07:51:48 AM »
Hi,

I am trying to use the stroke-dasharray and stroke-dashoffset properties on a svg shape, but it doesn't seem to work.

Is it a known issue ?

Thanks

john.v

  • Administrator
  • *****
  • Posts: 76
    • View Profile
Re: SVG stroke-dasharray property support ?
« Reply #1 on: December 04, 2017, 09:04:46 AM »
Hi Fa,

The rendering library of Coherent GT currently does not support drawing dotted and dashed lines in an SVG. However, you can work this around in multiple ways, for example, using SVG paths as masks, modifying the style.transform property of the shape via JS or simply by pre-rendering the SVG into a GIF or PNG/using sprite sheets which generate GIF or PNG images.

Could you please give us more details of your specific use case, so we could assist you further?

John V,
Support Engineer at Coherent Labs

Fa

  • Posts: 7
    • View Profile
Re: SVG stroke-dasharray property support ?
« Reply #2 on: December 05, 2017, 12:30:25 AM »
Hi John,

Thanks for the answer.

I want to do some border animations like https://codepen.io/Zeaklous/pen/kyGqm

Is there a way to know that a feature is not supported ? A log in the output console ?
Will Coherent GT 2.0 support dashed lines in SVG ?

Thanks




john.v

  • Administrator
  • *****
  • Posts: 76
    • View Profile
Re: SVG stroke-dasharray property support ?
« Reply #3 on: December 07, 2017, 12:56:16 AM »
Hi Fa,

The border animations you're describing can be done via CSS transitions. Here are some examples that demonstrate how you could utilize CSS transitions for such use cases: https://codepen.io/giana/pen/yYBpVY.

Alternatively, you could use a CSS spritesheet animation to achieve a specific effect. Here you can find a detailed explanation of this approach - http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps.

We indeed log the messages in the output console for some of the unsupported features. We'll make sure to add such logging for this case as well.

GT 2.0 won't support dashed and dotted lines, but we do plan to introduce the support for that feature next year.

Hope this helps.

John V,
Support Engineer at Coherent Labs

MidnightFifteen

  • Posts: 6
    • View Profile
Re: SVG stroke-dasharray property support ?
« Reply #4 on: September 28, 2018, 01:57:12 AM »
Hello John V,

it's been 9 months since last discussing this issue.
Do you plan to add stroke-dasharray and stroke-dashoffset in next six months?

We're discussing whether to apply new curved progress bars designed by our designers,
whose format may be the svg path.

john.v

  • Administrator
  • *****
  • Posts: 76
    • View Profile
Re: SVG stroke-dasharray property support ?
« Reply #5 on: October 03, 2018, 04:28:35 AM »
Hi MidnightFifteen,

Indeed, we will have support for stroke-dasharray and dashoffset very soon! We already support it internally so please keep an eye on our changelog - http://coherent-labs.com/changelog/ as this feature will be rolled out with one of our upcoming releases!

John V,
Support Engineer at Coherent Labs

Tags: svg