Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

I developed an application to convert SVG code into a JSON object that can be stored in a database. Another app was created to dynamically display the rendered result on a webpage. The rendering output appears as shown in this image: https://i.sstatic.net/KfHjj.jpg

Upon rendering, it seems like the open paths are connecting and partially filling the SVG. However, when running the raw SVG file, this issue does not occur, which can be verified by running the snippet provided below.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
... (SVG code continued)

For the rendering of SVG, two components were created: SvgBuilder and SvgComponent. The template files for these components are outlined below:

svg-builder.component.svg

(SVG builder component template code)

svg.component.svg

(SVG component template code)

This insight may provide clues about the issues occurring in Angular. To further investigate and test the behavior, you can access the live demo here. Instructions will guide you on how to replicate the problem using the code from the 'demo.svg' file located at:

src/app/micro-frontends/svg-builder

If the file is not automatically open upon loading the StackBlitz, you can copy and paste the code following the provided instructions.

angulartypescriptsvg

Answer №1

My issue wasn't with the SVG itself, but rather with the function I had created to generate the CSS properties. This is what it looked like:

private createCssProperty(prop: OvaadSvgStyleProperty): string{
    return `${prop.property}:${prop.setting}`;
  }

The problem arose because I mistakenly omitted a ; at the end of the string, causing the CSS rules to be structured incorrectly like this:

.st0{ fill:none stroke: #000000 stroke-width: 0.6 stroke-linecap: round stroke-linejoin: round stroke-miterlimit: 10 }

This didn't make sense to the browser, so I corrected it by adding the semicolon at the end of the string as shown below:

private createCssProperty(prop: OvaadSvgStyleProperty): string{
    return `${prop.property}:${prop.setting};`;
  }

After making this adjustment, everything now works perfectly :).

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

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

Do you know of a more efficient solution to handle a situation like this? <tr [style.background]="level == 'ALARM' ? 'violet' : level == 'ERROR' ? 'orange' : level == 'WARNING' ? 'yellow' ...

angulartypescript

Maintaining database consistency for multiple clients making simultaneous requests in Postgres with Typeorm and Express

My backend app is being built using Express, Typescript, Typeorm, and Postgres. Let's consider a table named Restaurant with columns: restaurant_id order (Integer) quota (Integer) The aim is to set an upper limit on the number of orders a restaura ...

typescriptpostgresqlexpressconstraintstypeorm

Troubleshooting: Angular input binding issue with updating

I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the sc ...

javascriptangulartypescript

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

htmlangulartypescriptaccessibilityjaws-screen-reader

The error message "Module 'electron' not found" is commonly encountered when working with Electron and TypeScript

Hey there! I'm having some trouble with Electron not supporting TypeScript on my setup. I'm using vscode 1.16.1 and here is an overview of my package.json: { [...] "devDependencies": { "electron": "^1.6.13", "ts-loader": "~2.3.7", ...

typescriptelectron

Identifying added elements that respond to link hover effects

I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...

javascriptjquerycsssvg

I am seeking advice on how to create an extension for a generic class in TypeScript specifically as a getter

Recently, I discovered how to create extensions in TypeScript: interface Array<T> { lastIndex(): number } Array.prototype.lastIndex = function (): number { return this.length - 1 } Now, I want to figure out how to make a getter from it. For exam ...

typescript

Hand over the component method as an argument to a class

One of my components, called First, is responsible for creating a new instance of a Worker class. During the creation process of this class, I intend to pass the Read method as a callback method. Once this class completes its task, it will then invoke thi ...

angulartypescript

Is it possible to extract Apollo type guards from a package?

I came across a helpful Apollo type guard that I want to integrate into my app. Here is the code snippet: export function isField(selection) { return selection.kind === 'Field'; } You can find it in node_modules/@apollo/client/utilities/grap ...

node.jstypescriptgraphqlapollo-client

Tips for displaying the string value of an elementFinder when encountering an error in protractor

I have the following code snippet: export async function waitTillClickable(e: ElementFinder): Promise<ElementFinder> { const conditions = EC.visibilityOf(e); await browser.wait(conditions, DEFAULT_TIMEOUT, `Element did not return ...

angulartypescriptprotractor

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

Code in Javascript to calculate the number of likes using Typescript/Angular

I have encountered a challenge with integrating some JavaScript code into my component.ts file in an Angular project. Below is the code snippet I am working on: ngOninit() { let areaNum = document.getElementsByClassName("some-area").length; // The pr ...

angulartypescriptangular13

Including the --aot flag in the Angular CLI can cause issues with the app

Recently, I encountered an issue with my Angular app while using dynamic forms. Everything was working fine until I added the --aot flag to my CLI command. Suddenly, I started receiving the error message "Property 'controls' does not exist on typ ...

angularangular2-formsaot

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Seeking assistance with maintaining directory structure when compiling Typescript to Javascript in Intellij Idea. The current directory setup is as follows: root - ts - SomeClass1.ts - SomeFolder - AwesomeClass2.ts - tsc The desired compiled file ...

javascriptintellij-ideatypescript

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

javascripthtmlangular

When a 401 error occurs, Angular's HttpClient subscribe method fails to capture the error

Something odd is happening with my code. Within my service, I have a simple httpClient get method. When the API responds with a status of 401, I expect it to trigger an error... but it doesn't. Instead, only 'complete' appears in the console ...

angular

Service that spans the entire application without relying on a service that is also used throughout the application

In continuation of my previous question, I am facing an issue with the No provider for ObservableDataService. I have an application-wide service named UploadedTemplatesService which must be a singleton. This service has one dependency - ObservableDataServ ...

angular

Unable to locate the module 'next' or its associated type declarations

Encountering the error message Cannot find module '' or its corresponding type declarations. when trying to import modules in a Next.js project. This issue occurs with every single import. View Preview Yarn version: 3.1.0-rc.2 Next version: 1 ...

reactjstypescriptnext.jsyarnpkgtsconfig

Routing in nested modules for Angular 7

I am struggling to understand how the routing works with multiple nested modules. The RouteTree seems correct to me, but I am facing an issue after navigating to the "ContactPage" where the URL changes but the view does not render. Below is a snippet of m ...

angularionic-frameworkroutesionic4

Displaying object properties in React and rendering them on the user interface

Within my React application, I am retrieving data from an API using the following code snippet: function PlayerPage() { interface PlayerDataType { id: number; handle: string; role: string; avatar: string; specialAbilities: null; s ...

reactjstypescript