Closed Veron116 closed 3 years ago
I'm trying to use generated sprite for css background and I found this bug: If I want to use svg like a background-image I have to enable options view and use for sprite
new SVGSpritemapPlugin([ './src/common/components/VSvgSprite/icons/illustration/**/*.svg', './src/common/components/VSvgSprite/icons/decor/**/*.svg' ],{ output: { filename: 'img/graphics-sprite.svg', svg4everybody: true, svgo: true, }, sprite: { prefix: false, generate: { title: false, use: true, view: true, } }, }),
After that I need to use svg in my css like this
.my-block { width: 100%; height: 300px; background: url(#{$path-to-sprite} + '#wave-view') top left no-repeat; }
But this way not working because plugin is adding identical ids for <symbol>, <use> and <view> elements.
<symbol>
<use>
<view>
For example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="345"> <symbol id="wave" viewBox="0 0 1920 195"> <path fill="#0b9a8" d="M1920 195H0V76.744C178.587 27.184 366.14."/> </symbol> <use xlink:href="#wave" y="150" width="1920" height="195"/> <view id="wave" viewBox="0 150 1920 195"/> </svg>
For correct render of svg like a background-image I need to add uniq id for <view> element into svg sprite.
PS: and it will be perfect if your documentation have more examples with different configuration of your plugin.
Sorry, I've found that option sprite.generate.view can accept a string and generate postfix for id.
I'm trying to use generated sprite for css background and I found this bug: If I want to use svg like a background-image I have to enable options view and use for sprite
After that I need to use svg in my css like this
But this way not working because plugin is adding identical ids for
<symbol>
,<use>
and<view>
elements.For example:
For correct render of svg like a background-image I need to add uniq id for
<view>
element into svg sprite.PS: and it will be perfect if your documentation have more examples with different configuration of your plugin.