Стили CSS не применяются к SVG, когда SVG отображается на холсте. ⇐ CSS

[Anonymous]

Я стиляю изображение SVG, используя CSS в отдельном файле. Затем я рендерирую SVG на холст, который можно сохранить в виде PNG. Однако, когда SVG отображается в элементе холста, стили не применяются. Я не могу использовать Inline CSS из-за политики безопасности контента в браузере.var btn = document.querySelector("button");
var svg = document.querySelector("svg");
var canvas = document.querySelector("canvas");

btn.addEventListener("click", function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = new XMLSerializer().serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svgBlob = new Blob([data], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svgBlob);

img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);

var imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
};

img.src = url;
});< /code>
.text-primary {
font-size: 24px;
font-family: calibri;
}

.text-secondary {
font-size: 12px;
font-family: arial;
}

.text-red {
fill: #ff0000;
}< /code>
svg to png




Sample Path Text




Text Style 1
Text Style 2


< /code>
< /div>
< /div>
< /p>
Вот рендеринг основного примера: svg слева и холст справа. src = "https://i.sstatic.net/9qlh2.png"/>

Стили CSS, применяемые к SVG слева, CSS не применяется к SVG на холсте справа


Подробнее здесь: https://stackoverflow.com/questions/670 ... -on-canvas