fyne-io/fyne

SVG Text Not Showing

Open

#685 opened on Feb 17, 2020

View on GitHub
 (3 comments) (1 reaction) (0 assignees)Go (1,526 forks)batch import
Hacktoberfestbugenhancement

Repository metrics

Stars
 (28,262 stars)
PR merge metrics
 (Avg merge 26d 11h) (38 merged PRs in 30d)

Description

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

  • OS: MacOS
  • Version: Catalina 10.15.2
  • Go version: go1.13 darwin/amd64
  • Fyne version: v1.2.2

Contributor guide