search

shrpne / vue-inline-svg

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it
MIT License
175 stars 21 forks source link

Attributes property generates as [object Object] #16

Closed dangrima90 closed 4 years ago

dangrima90 commented 4 years ago

Hi I'm testing out this component, basically I'm trying to use the attributes property.

<inline-svg
    :src="svgPath"
    :width="width"
    :height="height"
    :fill="fill"
    :attributes="[{name: 'opacity', value: 0.25}]"
  >
  </inline-svg>

When the component is rendered the attributes don't seem to be attached to the svg. In fact when inspecting the element I see the following:

image

I expected to see opacity="0.25" as an attribute on the svg element. Is this an issue, or am I passing the wrong value to the attributes property?

shrpne commented 4 years ago

Hi! You should set SVG attributes like you set fill in your example. Eg. <inline-svg opacity="0.25" :stroke-opacity="myStrokeOpacity"/>

attributes is not a component's prop that's why you get such strange output. I will update readme to make it clearer.

dangrima90 commented 4 years ago

Ah understood! Thanks for the clarification! Tested out and it worked :)