Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png

To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF using a hidden canvas element. However, the Canvas output ends up looking like this: https://i.sstatic.net/EFuIc.png

Despite my efforts to tweak the styling using CSS, some paths seem to be missing, and the overall appearance is not quite right. Modifying properties like background color and font-family did work successfully, but others such as fill and font color didn't have any effect:

canvas#canvas {
    background-color: aliceblue; //works
    font-family: sans-serif; //works
    font-size: 10px; //works
    fill: gray; //doesn't work
}

If anyone has experience with customizing paths and font color when creating a canvas element with Canvg, I would greatly appreciate your insights!

Answer №1

To convert an SVG div to PDF, you can utilize the printThis library. Simply identify the div ID containing the SVG and then execute this jQuery statement:

$("#svgdiv").printThis()

Upon execution, the SVG will be downloaded as a PDF file.

For further information, visit: jasonday/printThis

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract a value from an array that is not located at the array's tail using Javascript

In my array pvalue, each number is unique. It contains: 1 2 3 15 20 12 14 18 7 8 (total of 10 numbers). My goal is to remove the number "15" from the array, resulting in pvalue being: 1 2 3 20 12 14 18 7 8 (now with 9 numbers). How can I achieve this with ...

The term 'sequelize' is missing its definition - it involves Sequelize and consign

Just starting out in the world of Node.js. I'm currently working on integrating Sequelize into a basic application with Consign. In my "config/db.js" file: var Sequelize = require('sequelize'); var sequelize = new Sequelize('test&ap ...

Explore how to set up Express with React without resorting to using create-react

I am familiar with the react and Node.js Express bundle, but I require assistance. While this question may have been posed by someone else before, I have not come across a similar query within the same framework. The specific question is: How can queries ...

Struggling with setting up a PHP and Ajax registration and login system

Struggling with my code and in need of assistance. Desperately trying to set up a register form where users can input their username and password to sign up. Planning to utilize ajax, however, the integration seems faulty. For testing purposes, I tried ech ...

Ways to conceal the picture

Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...

How can the '!!user' syntax be utilized? What outcome does this code snippet produce?

I am looking to implement an angular route guard in my application. I came across this code snippet but I am confused about the line where user is mapped to !!user. Can someone explain the purpose of map(user => !!user) in this context? canActivate( ...

Transmitting and receiving a blob using JavaScript

Is there a way to send a blob using a JQuery ajax request and receive it server-side with Node.js + express? I tried sending the blob as a JSON string, but it doesn't seem to include any of the binary data: {"type":"audio/wav","size":344108} Are th ...

Activate filtering beyond the AngularJS datatable

Currently, I am experimenting with a codepen to understand how to filter data based on a clicked span element. The table is where the data is displayed and I'm looking for a way to trigger filtering outside of it. While the angularjs documentation spe ...

AJAX (Vanilla JavaScript): Sending Image through HTTP Request

I am a beginner with ajax and prefer not to use frameworks. I attempted to use PHP to determine if a file is set and display either true or false, but it didn't work as expected. I'm unsure of where I went wrong. Below is my HTML and JS code: & ...

Utilize CSS in your HTML using Express framework

I am attempting to link a css stylesheet to my basic html webpage. I am utilizing parse.com hosting for dynamic webpages that utilize express. There are numerous responses to this question, but none of them have proven successful in my case. I am trying ...

What is the best approach: Loading all database results at once or making multiple requests?

Looking to refine a vast database with these specific columns: Name - Maximum Height - Minimum Height - Range - Maximum Angle - Minimum Angle The goal is to filter the data based on user-inserted criteria, such as if a user inputs a maximum height of 80c ...

Steps for setting up node-openalpr on a Windows 10 system

While attempting to install npm i node-openalpr, an error is occurring: When using request for node-pre-gyp https download, I encounter a node-pre-gyp warning and error message. The package.json for node-openalpr is not node-pre-gyp ready, as certain pr ...

Using 'require' within a nested directive that relies on the parent directive in AngularJS

Implementing a sub directive to be utilized in multiple directives is my current challenge. These parent directives share a common controller that has useful methods for updating scope variables within these directives: (potentially changing controllers ...

Code remaining stable post-execution of promise

I'm facing a problem with my Node.js application where I'm using promise-mysql and bluebird packages to make calls to a MySQL database. Despite following tutorials and successfully querying the database, I keep encountering a timeout error. The p ...

Do iframes not utilize parental jquery?

I have a homepage that utilizes jQuery by loading it from the ajax google APIs in the head> tag. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> I attempted to use jQuery functio ...

Get the data from the files in the request using request.files in Node.js

Is there a way to read the content of a file (either a txt or CSV file) that a user uploads without saving it to local storage? I know I can save the file in an upload directory and then read it from storage. However, I'm wondering if there is a way ...

To show the image along with the .titleclass, .subtitleclass, and .description when clicking on it, what steps do I

<?php while($galleryrec = mysqli_fetch_array($getresultgallery)){ ?> <div class="col-lg-2 col-md-2 mb-4 mb-lg-0" id="imageidback"> <img data-id ="<?php echo $galleryrec['publishid& ...

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

Extracting data from a web service and populating an OWC11 spreadsheet with 10,000 rows

Having an issue with the web service call taking too long to return. The ASP.NET page is taking over a minute to start loading. Currently, I am using C# Response.Write() to output the data to Javascript for insertion into OWC11 spreadsheet. I'm lookin ...

Having difficulty accessing data in a JavaScript file within Odoo 9 platform

I have attempted to extract HTML content from JavaScript declared in my module. However, when I try to retrieve content by class name, all I can access is the header contents and not the kanban view. openerp.my_module = function(instance) { var heade ...