CODEWITHSUNDEEP
angularsvg
Optiq
Optiq

Reputation: 3264

SVG elements rendering in browser but not visible on screen

I'm using DomSanitizer and SafeHtml to inject svg code into my component. I can see in the console that all the elements are rendering, but they're not visible on my screen. I'm using the DomSanitizer because I'm generating the code from a data object. Here's an example of an element generated by the code

<svg:polyline id="left_arm_line_10" points="67.379982,339.7200012 72.1800003,562.5199585 61.2800064,592.4199829 75.0799942,614.3199463 76.2800064,715.4199829 81.2800064,756.4199829 85.2800064,712.5199585 84.879982,603.5199585 74.7800064,587.5199585 85.6800003,558.2199707 85.379982,347.519989" stroke="black" stroke-width=".22" fill="none" />

When pasting it directly between <svg></svg> tags it becomes visible on the screen. I'm rendering my svg.component in this fashion.

<svg:g svg-component [Data]="SvgData"></svg:g>

I made a stackblitz demo which you can view here and I noticed inside this demo that the graphic.component renders but not the svg inside the template. Other than that all the data clearly makes it to where it needs to be seeing that I can copy and paste the outputted svg elements, I really can't figure out what's going wrong here. prior to this point I was using a <text> element in the svg.component template for the component works text which rendered fine so I really don't understand what's so different now.

Upvotes: 1

Views: 1820

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

Something is wrong with your svg. stackblitz with working svg in template url

A simple svg like the following works like a charm.

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

The problem with your svg is your viewbox which is way off and that's why your svg is not visible.

Check in the stackblitz the 1000 1000 viewbox (zoom out) and you will see that your svg is both rendered and shown. Just not where you expect it to be. It's way off down the page and you need a much higher viewport to make it visible.

Upvotes: 2

Related Questions