The main document is the requirement to load SVG files and change colors at the front end of a recent project

Use the drop shadow

Drop-shadow is a function of predefined effects provided by the FILTER of CSS, which can output a projection of the image

  1. Different from text-shadow and box-shadow

Text-shadow provides a shadow effect for the text in the container, box-shadow provides a shadow effect for the border of the container, and drop-shadow provides a shadow effect for the image in the image

  1. parameterdrop-shadow(offset-x offset-y blur color)

In order to meet the requirement of changing the color, we can use the offset in the x direction to make the projected image not overlap with the original image, and use the overflow attribute of the outer container and the position offset of the image element to form the effect of changing the color of the image

   <div class="father">
       <img src="./firefox-logo.svg" class="child">
   </div>
Copy the code
.father {
     width: 100px;
     height: 100px;
     overflow: hidden;
 }
 .child {
     transform: translateX(100px);
     filter: drop-shadow(-100px 0px 0px #558ABB);
 }
Copy the code

Through the above code, we can obtain a solid color image with the same shape and outline as the original image, as shown below

By binding dynamic CSS, we can dynamically change the color of the image

  1. Unfortunately, I’ve tried using gradient colors, but it doesn’t seem to work and probably doesn’t work

Use raw – loader

Since drop-shadow does not support the use of gradient colors, we tried to implement it by loading SVG source code through raw-loader, so this method only supports the color modification of SVG images, while drop-shadow supports the color modification of PNG, JPG and other images except SVG format. There are pros and cons to both

  1. Train of thought

The idea of this method is that the color of SVG files is filled by fill. We can modify the fill attribute of nodes in SVG through CSS. To achieve gradient color, we need to define a gradient or

and fill it

  1. Project Configuration Install the raw-Loader dependency in the project and configure the raw-loader to load SVG files. In the project, you only need to load some source files for SVG files. You can perform the following operations

    config.module
  .rule('svgicon')
  .test(/\.(svg)(\? . *)? $/)
  .include.add(path.resolve(__dirname, 'src/assets/images/svg'))
  .end()
  .use('raw-loader')
  .loader('raw-loader')
  .end();
config.module
  .rule('svg')
  .exclude.add(path.resolve(__dirname, 'src/assets/images/svg'))
  .end()
  .use('file-loader')
  .end();
Copy the code

  2. Loading pictures

    <div v-html="url" class="my-svg-icon"></div>
Copy the code
    url() {
  let icon = ' ';
  try {
    icon = require(`@/assets/svg/${variable name}.svg`);
  } catch (e) {
    // Load a default image in case of an error loading image
    icon = this.defaultImg;
  }
  if (icon.default) {
    icon = icon.default;
  }
  if (icon.includes('</svg>') || icon.includes('.svg')) {
    returnicon; }}Copy the code

    We have now finished loading the source SVG file onto our page

  3. SVG elements have the attribute fill, which determines the color of the element. Normal solid colors can be assigned directly, but to use a gradient color, you need to define a gradient before using it

    <svg style="width:0; height:0; position:absolute;" aria-hidden="true" focusable="false">
 <linearGradient id="linearGradient" x2="0" y2="1">
   <stop offset="0%" stop-color="#FFB546" />
   <stop offset="100%" stop-color="#FF9901" />
 </linearGradient>
</svg>
Copy the code
    ::v-deep.my-svg-icon path {
    fill: url(#linearGradient);
 }
Copy the code

    We can choose to write all gradients in a VUE file and load them into the parent file using SVG to avoid multiple renderings. We can also use JS to dynamically generate linear gradients

2021-03-26