在React中实现一个简单的SVG背景图

最新推荐文章于 2024-08-30 08:43:03 发布

静水流深之鑫

最新推荐文章于 2024-08-30 08:43:03 发布

阅读量3.3k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_26941173/article/details/88827732

版权

本文介绍了如何在React中创建一个SVG背景图组件。通过定义SVG.jsx组件，并设置相关样式，可以将SVG作为背景应用于其他组件，从而实现自定义背景效果。

摘要由CSDN通过智能技术生成

在React中实现简单的Svg背景框

首先我们需要定义一个SVG.jsx组件，这个组件用于绘制svg背景：

   import React from 'react'
    import {
    Component } from 'react'
    
    export default  class Svg extends Component {
   
        constructor(props){
   
            super(props);
            this.state = {
   
                width : this.props.width,
                height : this.props.height,
                viewBox: this.props.viewBox,
                notes: [],
                Filter_id: new Date().getTime()
            }
        }
    
        componentDidMount(){
   
            this.getSvgNotes();
        }
    
        /**
         * 计算拐点xy坐标点方法
         * @param {*} point, 传入的坐标点
         * @param {*} index:0代表取x坐标，1代表取y坐标
         * @param {*} type:0代表加计算，1代表百分比计算，2代表长边计算
         * @returns resultPoint 经过计算后个数字类型坐标点
         */
        calaulateXY = (point, index, type) => {
   
            let {
    width, height } = this.state;
            let resultPoint = 0;
            // 短边计算
            // 转换x坐标的值(加)
            if (index === 0 && type === 0) resultPoint = parseFloat(point[index]) + 10;
            // 转换y坐标的值(加)
            if (index === 1 && type === 0) resultPoint = parseFloat(point[index]) + 10;
            // 转换x坐标的值(百分比)
            if (index === 0 && type === 1) resultPoint = parseFloat(point[index]) + width * 0.25;
            // 转换y坐标的值(百分比)
            if (index === 1 && type === 1) resultPoint = parseFloat(point[index]) + height * 0.2;
            return resultPoint;
        }
    
        /**
         * 获取svg背景图片需要的画边
         * @returns svg的数据
         */
        getSvgNotes = (