react -Dynamic SVG应剪切到其父容器大小，但不确定该如何处理

发布于 2025-02-04 02:16:19 字数 1166 浏览 2 评论 0原文

本质上，我的文件夹中有12个不同的SVG。我有一个SVG导入为React组件，然后用作组件。该SVG需要根据其父级的缩放。到目前为止，我已经完成了第一个位，但我不知道如何将此SVG夹在其父母或大小上以扩展到其父母的大小。

app.js

import React, { useState } from "react";
import styled from "styled-components";
import { ReactComponent as StrataSVG } from './StrataSVG/Strata_16.svg'; // summoning 
SVG from local folder

import './App.css';

const Container = styled.div`
   height: 50vh;
   width: 100%;
   background-color: ${props => props.bg};
`;

const Pattern = styled.svg`
   height: 1000px;
   width: 1500px;
`;

function App() {
   const [colorChosen, setColorChosen] = useState("green");
   const [bgChosen, setbgChosen] = useState("yellow");
   
  return (
      <Container bg={bgChosen}>
            <Pattern fill={colorChosen}>
               <Path></Path>
            </Pattern>
      </Container>
  );
}
const Path = () => <StrataSVG/>; // this is the imported PATH on line 3


export default App;

原文

Essentially I have 12 different svgs in a folder. I have I have an SVG imported as a react component and then used as component. This SVG needs to be scaled according to its parent div. So far I have done the first bit but I don't know how to clip this SVG to its parent or size to scale to it's parent size.

APP.JS

import React, { useState } from "react";
import styled from "styled-components";
import { ReactComponent as StrataSVG } from './StrataSVG/Strata_16.svg'; // summoning 
SVG from local folder

import './App.css';

const Container = styled.div`
   height: 50vh;
   width: 100%;
   background-color: ${props => props.bg};
`;

const Pattern = styled.svg`
   height: 1000px;
   width: 1500px;
`;

function App() {
   const [colorChosen, setColorChosen] = useState("green");
   const [bgChosen, setbgChosen] = useState("yellow");
   
  return (
      <Container bg={bgChosen}>
            <Pattern fill={colorChosen}>
               <Path></Path>
            </Pattern>
      </Container>
  );
}
const Path = () => <StrataSVG/>; // this is the imported PATH on line 3


export default App;