search

fyne-io / fyne

Cross platform GUI toolkit in Go inspired by Material Design
https://fyne.io/
Other
24.67k stars 1.37k forks source link

SVG Text Not Showing #685

Open notnil opened 4 years ago

notnil commented 4 years ago

Describe the bug:

The text in an SVG isn't rendering in Fyne but is on other platforms such as Chrome and Mac Preview.

To Reproduce:

package main

import (
    "fyne.io/fyne"
    "fyne.io/fyne/app"
    "fyne.io/fyne/widget"
)

func main() {
        // "board.png" works
    res, err := fyne.LoadResourceFromPath("board.svg")
    if err != nil {
        panic(err)
    }
    a := app.New()
    w := a.NewWindow("Chess")
    w.SetContent(
        widget.NewIcon(res),
    )
    w.ShowAndRun()
}

Screenshots:

Expected: Screen Shot 2020-02-17 at 7 32 10 AM Got: Screen Shot 2020-02-17 at 7 31 41 AM

Example code:

<?xml version="1.0"?>
<!-- Generated by SVGo -->
<svg width="360" height="360"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="360" height="360" />
<rect x="0" y="315" width="45" height="45" style="fill: #787878"/>
<text x="2" y="326" style="font-size:11px;fill: #ffffff">1</text>
<text x="42" y="357" style="text-anchor:end;font-size:11px;fill: #ffffff">a</text>
<rect x="45" y="315" width="45" height="45" style="fill: #ffffff"/>
<text x="87" y="357" style="text-anchor:end;font-size:11px;fill: #787878">b</text>
<rect x="90" y="315" width="45" height="45" style="fill: #787878"/>
<text x="132" y="357" style="text-anchor:end;font-size:11px;fill: #ffffff">c</text>
<rect x="135" y="315" width="45" height="45" style="fill: #ffffff"/>
<text x="177" y="357" style="text-anchor:end;font-size:11px;fill: #787878">d</text>
<rect x="180" y="315" width="45" height="45" style="fill: #787878"/>
<text x="222" y="357" style="text-anchor:end;font-size:11px;fill: #ffffff">e</text>
<rect x="225" y="315" width="45" height="45" style="fill: #ffffff"/>
<text x="267" y="357" style="text-anchor:end;font-size:11px;fill: #787878">f</text>
<rect x="270" y="315" width="45" height="45" style="fill: #787878"/>
<text x="312" y="357" style="text-anchor:end;font-size:11px;fill: #ffffff">g</text>
<rect x="315" y="315" width="45" height="45" style="fill: #ffffff"/>
<text x="357" y="357" style="text-anchor:end;font-size:11px;fill: #787878">h</text>
<rect x="0" y="270" width="45" height="45" style="fill: #ffffff"/>
<text x="2" y="281" style="font-size:11px;fill: #787878">2</text>
<rect x="45" y="270" width="45" height="45" style="fill: #787878"/>
<rect x="90" y="270" width="45" height="45" style="fill: #ffffff"/>
<rect x="135" y="270" width="45" height="45" style="fill: #787878"/>
<rect x="180" y="270" width="45" height="45" style="fill: #ffffff"/>
<rect x="225" y="270" width="45" height="45" style="fill: #787878"/>
<rect x="270" y="270" width="45" height="45" style="fill: #ffffff"/>
<rect x="315" y="270" width="45" height="45" style="fill: #787878"/>
<rect x="0" y="225" width="45" height="45" style="fill: #787878"/>
<text x="2" y="236" style="font-size:11px;fill: #ffffff">3</text>
<rect x="45" y="225" width="45" height="45" style="fill: #ffffff"/>
<rect x="90" y="225" width="45" height="45" style="fill: #787878"/>
<rect x="135" y="225" width="45" height="45" style="fill: #ffffff"/>
<rect x="180" y="225" width="45" height="45" style="fill: #787878"/>
<rect x="225" y="225" width="45" height="45" style="fill: #ffffff"/>
<rect x="270" y="225" width="45" height="45" style="fill: #787878"/>
<rect x="315" y="225" width="45" height="45" style="fill: #ffffff"/>
<rect x="0" y="180" width="45" height="45" style="fill: #ffffff"/>
<text x="2" y="191" style="font-size:11px;fill: #787878">4</text>
<rect x="45" y="180" width="45" height="45" style="fill: #787878"/>
<rect x="90" y="180" width="45" height="45" style="fill: #ffffff"/>
<rect x="135" y="180" width="45" height="45" style="fill: #787878"/>
<rect x="180" y="180" width="45" height="45" style="fill: #ffffff"/>
<rect x="225" y="180" width="45" height="45" style="fill: #787878"/>
<rect x="270" y="180" width="45" height="45" style="fill: #ffffff"/>
<rect x="315" y="180" width="45" height="45" style="fill: #787878"/>
<rect x="0" y="135" width="45" height="45" style="fill: #787878"/>
<text x="2" y="146" style="font-size:11px;fill: #ffffff">5</text>
<rect x="45" y="135" width="45" height="45" style="fill: #ffffff"/>
<rect x="90" y="135" width="45" height="45" style="fill: #787878"/>
<rect x="135" y="135" width="45" height="45" style="fill: #ffffff"/>
<rect x="180" y="135" width="45" height="45" style="fill: #787878"/>
<rect x="225" y="135" width="45" height="45" style="fill: #ffffff"/>
<rect x="270" y="135" width="45" height="45" style="fill: #787878"/>
<rect x="315" y="135" width="45" height="45" style="fill: #ffffff"/>
<rect x="0" y="90" width="45" height="45" style="fill: #ffffff"/>
<text x="2" y="101" style="font-size:11px;fill: #787878">6</text>
<rect x="45" y="90" width="45" height="45" style="fill: #787878"/>
<rect x="90" y="90" width="45" height="45" style="fill: #ffffff"/>
<rect x="135" y="90" width="45" height="45" style="fill: #787878"/>
<rect x="180" y="90" width="45" height="45" style="fill: #ffffff"/>
<rect x="225" y="90" width="45" height="45" style="fill: #787878"/>
<rect x="270" y="90" width="45" height="45" style="fill: #ffffff"/>
<rect x="315" y="90" width="45" height="45" style="fill: #787878"/>
<rect x="0" y="45" width="45" height="45" style="fill: #787878"/>
<text x="2" y="56" style="font-size:11px;fill: #ffffff">7</text>
<rect x="45" y="45" width="45" height="45" style="fill: #ffffff"/>
<rect x="90" y="45" width="45" height="45" style="fill: #787878"/>
<rect x="135" y="45" width="45" height="45" style="fill: #ffffff"/>
<rect x="180" y="45" width="45" height="45" style="fill: #787878"/>
<rect x="225" y="45" width="45" height="45" style="fill: #ffffff"/>
<rect x="270" y="45" width="45" height="45" style="fill: #787878"/>
<rect x="315" y="45" width="45" height="45" style="fill: #ffffff"/>
<rect x="0" y="0" width="45" height="45" style="fill: #ffffff"/>
<text x="2" y="11" style="font-size:11px;fill: #787878">8</text>
<rect x="45" y="0" width="45" height="45" style="fill: #787878"/>
<rect x="90" y="0" width="45" height="45" style="fill: #ffffff"/>
<rect x="135" y="0" width="45" height="45" style="fill: #787878"/>
<rect x="180" y="0" width="45" height="45" style="fill: #ffffff"/>
<rect x="225" y="0" width="45" height="45" style="fill: #787878"/>
<rect x="270" y="0" width="45" height="45" style="fill: #ffffff"/>
<rect x="315" y="0" width="45" height="45" style="fill: #787878"/>
</svg>

Device (please complete the following information):

andydotxyz commented 4 years ago

Yes, sorry the SVG loader we use does not yet support text objects, sorry. If you know of other Go loaders that do that would be great :)

andydotxyz commented 3 years ago

I know it is not related to this bug report, but it relates to the thing you may have been working on... https://youtu.be/zlPDWBLhn6c https://github.com/andydotxyz/chess Your chess library was invaluable @notnil thank you - let me know if you'd like to be involved in that GUI in some way :)

notnil commented 3 years ago

@andydotxyz I definitely would like to help with the GUI. Feel free to shoot me an email to coordinate.