Questions tagged svg

Explore the latest questions and answers asked by our top developers.

angular dom sanitizer and svg byte array

I am trying to bind a byte array to an image tag in angular. I know the byte array is correct, because I can download it and view it from my API. I created an image like this: <img [src]="src" /> and then in my code, I sanitized the byte array like this: this.src = […]

By r3plica
Published
Categorized as angular, angular-dom-sanitizer, svg Tagged , ,

Dynamic CSS ID selectors in angular

I’m displaying an SVG that I fetch from a server. The SVG contains polygons and depending on user input I want to style each polygon differently. The SVG contains entries like this: <polyline id="tp_510" fill="#FFFAEC" points="1065.529,635.777 1085.896,600.479 1065.523,565.184 1024.774,565.185 1004.4,600.482 1024.78,635.778 1065.529,635.777 "/> <polyline id="tp_520" fill="#FFFAEC" points="1065.529,706.364 1085.896,671.068 1065.523,635.772 1024.774,635.773 1004.4,671.071 1024.78,706.371 1065.529,706.364 "/> Here […]

By migueljuan
Published
Categorized as angular, css, svg Tagged , ,

Angular + Clarity: Icons are not loaded properly

So i’m building a little web app with the help of clarity. Im using the build in icons for a side menue among other things. Now, the first icon i put in is fine, shows up no problem. Then when i put in more, they were just showing the fallback animation as if the icons […]

By Finja Stiep
Published
Categorized as angular, svg, vmware-clarity, webui Tagged , , ,

Is it possible to dynamically draw SVGs using TypeScript/Angular? [closed]

I want to have curved lines similar to what is shown here. In that link, when you add layers or neurons, you can see that the curved lines update. I want something similar, are SVGs the best way to do this? Basically, I would ideally want a TypeScript method that just takes a height and […]

By Matt123
Published
Categorized as angular, css, javascript, svg, typescript Tagged , , , ,

Add CSS to a path of SVG in Angular Typescript

I am new in Angular and I am trying to do the following: So I have this SVG element: (I’m going to paste a few lines of it) <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="289.61084" height="370.54398"> <title id="title3476">Human Dental Arches</title> <metadata id="metadata8"> </metadata> <defs> <marker refX="0" refY="0" orient="auto" overflow="visible"> <circle r="0.8" cy="0" cx="3"/> <circle r="0.8" cy="0" cx="6.5"/> […]

By Peter
Published
Categorized as angular, css, jquery, svg, typescript Tagged , , , ,

Disabling of an HTML svg tag

When I use the following [attr.disabled] with a button it works fine. isDisabled = true; <button [attr.disabled] = "isDisabled ? ‘disabled’ : null"> Click </button> What to do If I want to do the same with svg tag? The same way does not work. <svg> <use [attr.xlink:href]="show ? ‘#arrow-top’ : ‘#arrow-bottom’"></use> </svg> I need to […]

By AngularDev
Published
Categorized as angular, html, javascript, svg Tagged , , ,

How to style xmlns imported SVG image?

I am importing an SVG image in my Angular 8 project. I generate this image with this HTML <div #workflow class="left_pane"></div> and this TS: @ViewChild("workflow", {static: true}) public mermaidDiv; When inspecting the screen in the developer tools, the generated SVG code looks something like this: <svg id="graphDiv" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 290.859375px;" viewBox="0 0 290.859375 421.78125">…</svg> […]

By Benjamin Salerno
Published
Categorized as angular, css, html, svg, xml-namespaces Tagged , , , ,

How to disable an svg tag based on any condition?

How can I disable an svg tag based on a condition in Angular? Tried with [disabled]="true" but does not work for me. Adding a sample code down below. <span> <svg role="presentation" (click)="show = !show"> <use [attr.xlink:href]="show ? ‘#arrow-top’ : ‘#arrow-bottom’"></use> </svg> </span> Source: Angular Questions

By WebDeveloper21
Published
Categorized as angular, css, html, svg Tagged , , ,

What would be the best approach to create a body muscle highlighter in a Hybrid Webapp using Ionic & Angular? [closed]

I am currently trying to create a app – coming originally from the react native world. I built a minor fitness app for myself to track my progress in react native, currently I am trying to develop the same thing in Ionic + Angular. Is there something similar to this Body Muscle Highlighter from React: […]

Handling click within an SVG path in Angular

<div #floorPlanSvgDiv style="border: solid 1px red; height:666px; widt:444px"> <svg xmlns="http://www.w3.org/2000/svg" width="8.26667in" height="11.6889in" viewBox="0 0 744 1052"> <path (click)="oClick(5)" id="Selection #5" fill="none" stroke="black" stroke-width="1" d="M 506.00,167.00 C 506.00,167.00 470.00,168.00 470.00,168.00 470.00,168.00 398.00,168.00 398.00,168.00 398.00,168.00 399.00,208.00 399.00,208.00 399.00,208.00 435.00,208.00 435.00,208.00 435.00,208.00 455.00,210.00 455.00,210.00 455.00,210.00 507.00,210.00 507.00,210.00 507.00,210.00 507.00,182.00 507.00,182.00 507.00,182.00 506.00,167.00 506.00,167.00 Z" /> <path (click)="onClick(4)" id="Selection […]

By Mawg says reinstate Monica
Published
Categorized as angular, svg Tagged ,
1 13

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq