<x-knob> bugs

Firefox bug 1199538: Incorrect SVG text rendering when font-size is effectively smaller than 8px

Each graphic below has width and height set to

px. Internally, the SVG viewBox dimensions are 10x10, and the text font-size is 0.4px. Doing the math, this the actual font-size in document pixels is

px. If this number is smaller than 8px, then text rendering in Firefox is completely broken, with all characters drawn on top of each other. Sometimes (depending on the rotation) the characters is drawn at the wrong location.

Size: px. Try 199px and 200px.

Current rotation is

deg. Change it by dragging the left-most wheel. Try 0deg and 0.25deg and 10deg and 90deg.

Firefox bug 1199536: Tinted image background in external SVG included via SVG <image> tag

We have an external drivingwheel.svg file (from Open clipart) that is being included below in several ways.

In Firefox, loading this external SVG file inside <image xlink:href="drivingwheel.svg"/> is buggy, because the background gets filled with a semi-transparent shade of gray.

Loading the same SVG image using HTML <img> or <object> works as expected. Using the same SVG image as CSS background-image also works as expected.

Chrome bug 109212: <use> does not render correctly if pointing to an external SVG that contains "url(#some_id)"

If we have an external SVG file, we can use <use xlink:href="foo.svg#bar"> to include it (or some elements from it) into an SVG element.

However, if this external SVG file defines stuff such as filters and gradients, and uses such stuff to render other elements (e.g. fill="url(#gradient)"); then Chrome will not resolve these external IDs correctly, failing to render the imported file correctly.

It is worth noting that url(#foo) will fail rendering, but <use xlink:href="#bar"> is resolved correctly.

As a bonus bug, the title="" tooltip does not show up in these <svg> elements.