addAttributesToSVGElement not working.

[michaelmano]

So just a question as documentation on both parties is hard to follow.

I am trying to set my webpack config up to add preserveAspectRatio='none' to my svg.

new SvgStore.Options({
      svgoOptions: {
        plugins: [
          { removeTitle: true },
          { removeUselessDefs: true },
          { cleanupIDs: { remove: false, minify: true }},
          { addAttributesToSVGElement: { attributes : ["preserveAspectRatio='none'", "test-attribute"] } }
      ]}
})

However this is ignored. any insight would be appreciated.

[michaelmano]

For anyone who runs into this issue...

A work around is building your own svg template. below is mine. store it where you wish.

svg&attributes(svg)

  mixin parseObject(obj)
    each child in obj
      if child !== null && child.type === 'text'
        | <![CDATA[#{child.data}]]>
      else if child !== null && typeof child.children === 'object'
        | #[#{child.name}&attributes(child.attribs) #[+parseObject(child.children)]]

  if defs.length
    defs
      each def in defs
        | #[#{def.name}&attributes(def.attribs)  #[+parseObject(def.children)]]

  each symbol in symbols
    | #[#{symbol.name}&attributes(symbol.attribs)(preserveAspectRatio='none') #[+parseObject(symbol.children)]]

then in your webpack config.

plugins: [
    new SvgStore.Options({
      template: './resources/assets/config/svg-template.pug',
      svgoOptions: {
        plugins: [
          { removeTitle: true },
          { removeUselessDefs: true },
          { cleanupIDs: { remove: false, minify: true }}
      ]}
    })
  ],

This will now use the pug template you have created which adds preserveAspectRatio='none' to all symbols.

[lgordey]

@michaelmano Thanks for your own reply with such a detailed description 👍

[lgordey]

documentation on both parties is hard to follow

Feel free to send a PR to fix that :)

[skepsys]

Solution seems to be much simpler, since attributes should be an array of objects, not just strings:

plugins: [
  { addAttributesToSVGElement: {
       attributes: [{ "aria-hidden": "true" }]
    }
  },