0

The problem is I need to access a dynamically imported svg using only it's file name and then access the color/fill value of its circle tag.

The user will route to 1 of hundreds of possible pages, each having a 3 letter code, I only know the name of the page by it's routed code. Each 3 letter code maps to a .svg file.

The only way I've found to do this is to use either the HTML object tag or img tag as I can specify the path to the SVG instead of inlining it.

<img :src="'statics/icons/svg/color/' + symbol + '.svg'"/>

or:

<object ref="symbol" type="image/svg+xml" :data="'statics/icons/svg/color/' + symbol + '.svg'"></object>

This works but I want to do something fancy and make my page background color the same as the dominant color in the svg. Because of this I can't use the image import method as the DOM will never see the SVG xml for some reason.

My SVGs look like this:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" fill-rule="evenodd">
    <circle cx="16" cy="16" r="16" fill="#F7931A"/>
    <path fill="#FFF" fill-rule="nonzero" d="long string of path data..."/>
  </g>
</svg>

All I care about is getting the 'fill' attribute of the <circle>. Can it be done?

I've tried the following:

mounted: function () {
  console.log(this.$refs.symbol.$child)
  console.dir(this.$refs['symbol'].contentDocument)
  console.dir(this.$el.childNodes)
}

None of that seems to work, and view usually requires a ref tag to access the dom or at least an ID/Class.

altShiftDev
  • 1,564
  • 1
  • 9
  • 20
  • wait till the object tag's onload event fires, get its content document, use that to call querySelector("circle") which of these is the problem? – Robert Longson Jan 21 '18 at 19:18
  • @RobertLongson you mean using onload="loadImage()" in the HTML? I just tried that and it shows up as null. Same with vuejs's mounted function. They don't seem to be able to tell when the SVG has actually loaded. If I wait a few seconds and press a button to call your querySelector('circle') it will work but this is not anywhere near automated. – altShiftDev Jan 21 '18 at 20:02
  • onload="loadImage()" on the object tag doesn't work? – Robert Longson Jan 21 '18 at 21:10
  • Are you using `vue-router` by chance? If so, you can leverage route props . –  Jan 21 '18 at 22:48
  • @btl yes I am, how would you configure that in this situation? – altShiftDev Jan 21 '18 at 23:18
  • Post an example URL you would use to access one of the possible pages. –  Jan 21 '18 at 23:21
  • Well, something like: http://localhost:8080/#/abc/ (abc being the route). – altShiftDev Jan 21 '18 at 23:23
  • NVM I see you answered that in the question already. –  Jan 21 '18 at 23:26

0 Answers0