• Which the release of FS2020 we see an explosition of activity on the forun and of course we are very happy to see this. But having all questions about FS2020 in one forum becomes a bit messy. So therefore we would like to ask you all to use the following guidelines when posting your questions:

    • Tag FS2020 specific questions with the MSFS2020 tag.
    • Questions about making 3D assets can be posted in the 3D asset design forum. Either post them in the subforum of the modelling tool you use or in the general forum if they are general.
    • Questions about aircraft design can be posted in the Aircraft design forum
    • Questions about airport design can be posted in the FS2020 airport design forum. Once airport development tools have been updated for FS2020 you can post tool speciifc questions in the subforums of those tools as well of course.
    • Questions about terrain design can be posted in the FS2020 terrain design forum.
    • Questions about SimConnect can be posted in the SimConnect forum.

    Any other question that is not specific to an aspect of development or tool can be posted in the General chat forum.

    By following these guidelines we make sure that the forums remain easy to read for everybody and also that the right people can find your post to answer it.

SVG Support in HTML Gauges?

P

pauliom

Messages
8
Country
unitedkingdom
I'm developing a HTML gauge using the SVG + Circle elements. However, MSFS seems to ignore the stroke attributes. Is this a known issue?
HTML: 
<svg class="fuel-radial" viewBox="0 0 200 200">
    <circle class="ring-fuel" cx="100" cy="100" r="88" style="stroke-dasharray:552;stroke-dashoffset:138; stroke: rgb(5, 196, 0);">
    </circle>
</svg>
 
I think your SVG code is a little off.

Based on at quick look at an Illustrator SVG that I know works, you might want to try this arrangement without the 'style' call:
SVG: 
<svg class="fuel-radial" viewBox="0 0 200 200">
    <circle class="ring-fuel" cx="100" cy="100" r="88" stroke-dasharray="552" stroke-dashoffset="138" stroke="rgb(5, 196, 0)"/>
</svg>
 
joshwagstaff13 said:
I think your SVG code is a little off.

Based on at quick look at an Illustrator SVG that I know works, you might want to try this arrangement without the 'style' call:
SVG: 
<svg class="fuel-radial" viewBox="0 0 200 200">
    <circle class="ring-fuel" cx="100" cy="100" r="88" stroke-dasharray="552" stroke-dashoffset="138" stroke="rgb(5, 196, 0)"/>
</svg>
Click to expand...
I certainly give that a try, although it does work in a normal browser but your changes might be better for MSFS
 
joshwagstaff13 said:
I think your SVG code is a little off.

Based on at quick look at an Illustrator SVG that I know works, you might want to try this arrangement without the 'style' call:
SVG: 
<svg class="fuel-radial" viewBox="0 0 200 200">
    <circle class="ring-fuel" cx="100" cy="100" r="88" stroke-dasharray="552" stroke-dashoffset="138" stroke="rgb(5, 196, 0)"/>
</svg>
Click to expand...
Sadly it doesn't work. It still ignores the stroke dash/offset properties
 
FYI The workaround I've used is to generate a PATH rather than using CIRCLE, it's a pain, but hey...
 
pauliom said:
FYI The workaround I've used is to generate a PATH rather than using CIRCLE, it's a pain, but hey...
Click to expand...
It's entire possible that those particular functions just aren't supported by the Coherent UI system.

I say from experience that there's a decently sized list of CSS functions supported by modern browsers that Coherent simply doesn't support, which the MSFS SDK docs neglect to mention.
 
You must log in or register to reply here.
Back
Top