21 replies

SVG not displaying

I have a function that returns an SVG element like so:

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

That code works fine with the VS code live server. But when I use it in a local dev server, the

<path>

<path>

and

<polygon>

<polygon>

elements' width and height become 0.
this is my CSS code:

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

NOTE:
in the VS code live server, the SVG element is hardcoded into the HTML, it is not rendered by a JavaScript function, but the SVG element code is identical in both cases.
Any idea what could be doing wrong?
Thanks in advance.

KP-C

Kevin Powell - Community•3y ago•

21 replies

Zidan

SVG not displaying

I have a function that returns an SVG element like so:

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

That code works fine with the VS code live server. But when I use it in a local dev server, the

<path>

<path>

and

<polygon>

<polygon>

elements' width and height become 0.
this is my CSS code:

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

SVG not displaying

Similar Threads

SVG not displaying

Similar Threads

Similar Threads

Similar Threads