0
137
VistasSi bien la fuente Drawing svg on canvas no se aplica en la vista previa del lienzo
Dibujo una imagen SVG en un elemento de lienzo. La imagen SVG usa una fuente determinada, pero al dibujar el SVG en el lienzo, la fuente no se aplica en la vista previa del lienzo.
HTML
<h3>Original Svg</h3> <svg id="svgData" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" text-anchor="middle" viewBox="0 0 1584 648"> <style> @import url("https://fonts.googleapis.com/css2?family=Ms+Madi&family=PT+Sans&Roboto+Condensed"); .Rrrrr { fill: red; } </style> <text font-family="Ms Madi" x="987" y="90" font-size="40" class="personalization personalization_text_1">Font to be changed</text> <text font-family="Ms Madi" x="987" y="350"> </text> <g id="MAIN_PIC" xmlns:zcc="http://www.zund.com/ZCC" zcc:date="2022-03-16T17:10:52" zcc:version="3.1.6.28469"> <rect style="fill:none;stroke:#000000;stroke-miterlimit:10;" width="1584" height="648"></rect> </g> </svg> <hr> <h3>Canvas preview</h3> <canvas id="canvas1" ></canvas>JS
drawPrevCanvas(); function drawPrevCanvas() { var svg = document.getElementById('svgData'); var xml = new XMLSerializer().serializeToString(svg); var svg64 = btoa(xml); var b64Start = 'data:image/svg+xml;base64,'; var image64 = b64Start + svg64; var hcanvas_prev_3 = document.getElementById('canvas1'); var ctx3 = hcanvas_prev_3.getContext("2d"); var svgImgPrev = new Image(); svgImgPrev.crossOrigin = "Anonymous"; hcanvas_prev_3.width = 400; hcanvas_prev_3.height = 164; svgImgPrev.onload = function() { ctx3.drawImage(svgImgPrev, 0, 0, 400, 164); } svgImgPrev.src = image64; } Imagen 
1 Respuestas
Responde la pregunta0
Actualmente estoy trabajando en esto y tratando de obtener una respuesta. Por lo general, con él quieres usar esto en tu JavaScript:
hcanvas_prev_3.font = 'font name';Esto generalmente debería reemplazar la fuente dentro de la vista previa. Sin embargo, parece que no carga la fuente.
Sin embargo, decidí ver si la fuente era el problema aquí y la cambié a Raleway proporcionada por Google Fonts. Parece cargarse en el svg original.
Aquí hay una foto para mostrar: 
Extrañamente, cuando lo asigno en JavaScript así:
hcanvas_prev_3.font = "Raleway";Luego registre la fuente así:
console.log(hcanvas_prev_3.font)Imprime que la fuente está activa ver captura de pantalla:
He estado buscando para ver cómo solucionarlo, y he probado muchas opciones diferentes:
Que esto también puede suceder si restableces el tamaño del lienzo. Al menos, vi esto en Chrome 23 hoy.
context.font = 'bold 20px arial'; canvas.width = 100; canvas.height = 100; console.log(context.font); // gives '10px sans-serif'Por lo tanto, no lo he arreglado todavía, ¡pero estoy trabajando en ello!