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

[Anonymous]

Я стиляю изображение SVG, используя CSS в отдельном файле. Затем я рендерирую SVG на холст, который можно сохранить в виде PNG. Однако, когда SVG отображается в элементе холста, стили не применяются. Я не могу использовать Inline CSS из -за политики безопасности контента в браузере.

Код: Выделить всё

svg to png




svg to png



Sample Path Text




Text Style 1
Text Style 2

style.css

Код: Выделить всё

.text-primary {
font-size: 24px;
font-family: calibri;
}

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

.text-red {
fill: #ff0000;
}

script.js

Код: Выделить всё

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;
});

Вот рендеринг основного примера: svg слева и холст справа.>

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