SVG大小在反应

时间：2018-08-27 10:08:24

标签： css reactjs svg

您好，我迫切希望调整svg的大小。 不管我做什么，即使包含它的div小得多，大小也保持不变。 在普通的html和CSS中，它会自动调整大小，我在做什么错了？

import React, { Component } from 'react';
import logo from './logo.svg'

class Logo extends Component {
    render(){
        return(
            <div className="size">
            <img src={logo} alt={"logo"}/> 
            </div>
        );
    }
}

export default Logo

svg部分

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
        <g transform="translate(0,0)">
        <title>Logo</title>
        <path fill="#009FE3" d="M36.9 707.8H1747V1000H36.9"/>
        <path d="M385 104.1h1.7l138.7 503.5h86.3L771.6.1h-90.5L567.7 494.2H566L429.8.1h-89.7L203.9 494.2h-1.7L88.8.1H0l158.3 607.5h86.2m889.6-119.4c-16.2 22.1-35.4 38.8-57.7 50.3-22.3 11.5-47 17.3-74.2 17.3-12 .2-26.4-2.9-43.3-9.2-16.9-6.3-31.9-16.8-45-31.5-13.1-14.7-20-34.7-20.8-59.9.3-31.5 9.5-56.9 27.6-76.1 18.1-19.2 43.6-38.7 76.4-58.3l137 167.4zm-110.9-252.1c-12.5-11.9-25.4-27.4-38.6-46.5-13.2-19.1-20.4-38.8-21.5-59.2-.3-7.2 1.2-15.9 4.5-26.1 3.3-10.2 10.1-19.3 20.3-27.3 10.2-8 25.6-12.1 46.2-12.6 13.5-.6 27.4 3.8 41.8 13.1 14.4 9.3 22.2 27.2 23.4 53.7-1.2 25.6-9.8 46.7-26 63.5-16.1 16.9-32.8 30.7-50.1 41.4zm195.5 240.3c15.5-29 27.2-56.8 35-83.4 7.8-26.6 12.5-50.4 14.1-71.4h-70.2c-3.5 21.2-6.9 38-10 50.2-3.2 12.2-8 27.1-14.5 44.5l-110.8-132c15.5-10 31.5-21.9 48.2-35.8 16.7-13.9 30.9-30.8 42.6-50.8 11.7-20 17.8-44.1 18.3-72.4.3-31.8-10.4-60.3-32.2-85.4-21.8-25.1-56.4-38.3-103.9-39.8-46.7 1.3-82.3 15-106.8 41.3-24.5 26.3-36.8 57.6-37 94-.1 25.2 5.2 47.4 15.7 66.6 10.5 19.2 26.7 41.9 48.6 67.9-54.9 30.5-91.8 60-110.7 88.3-18.9 28.3-27.6 62.6-26.3 102.9-.6 16.6 3.6 37.2 12.6 61.9 9 24.7 26.4 46.7 52.3 66.2 25.8 19.5 63.7 29.8 113.5 30.9 43.6-.5 79-8.2 106.1-23.3 27.1-15 50.7-34.6 70.6-58.8l56.7 69.3h96.4l-108.3-130.9zm70.1-403.7h205.6v534.8h82V72.7H1782V0h-493.2"/>
        <path fill="#FFF" d="M343.3 821.9h-24.1L305.3 886h-.3l-13.4-64.1h-23.7L255.4 886h-.4l-13.9-64.1h-24.9l25.1 89.2h24.1l13.9-65h.4l13.9 65h24.1m192.6-89.2h-24.1L472.3 886h-.3l-13.4-64.1H435L422.4 886h-.3l-13.9-64.1h-25.1l25.2 89.2h24.2l13.9-65h.3l13.9 65h24.1m192.7-89.2h-24.1L639.4 886h-.4l-13.5-64.1h-23.6L589.3 886h-.3l-13.9-64.1h-25l25.2 89.2h24.1l13.9-65h.3l13.9 65h24.2m69.3-24.5h25.1V911H721zm109.4 24.5h23.4c3.2-15.3 5.8-27.8 7.8-37.6 2-9.7 3.7-17.7 4.9-23.9 1.3-6.2 2.3-11.8 3.2-16.6.9-4.9 1.7-10.1 2.6-15.7h.3c1 5.6 1.9 11 2.9 16.1.9 5.1 2 10.9 3.3 17.3 1.3 6.5 2.9 14.5 4.9 24.1 2 9.6 4.5 21.7 7.6 36.3h24.1l33.8-120.2h-25.5c-3.9 16.4-7 29.7-9.4 40-2.4 10.3-4.2 18.5-5.5 24.5-1.3 6-2.3 10.7-3 14.2-.7 3.5-1.3 6.5-1.7 9.2h-.3c-.6-3.7-1.3-7.4-2-11-.7-3.6-1.6-8.3-2.7-14-1.2-5.7-2.8-13.5-4.9-23.5-2.1-10-4.9-23.1-8.4-39.4h-26.6c-3.2 15.6-5.7 28.5-7.7 38.6-2 10.1-3.5 18.2-4.7 24.3-1.1 6.1-2 11.1-2.7 14.8-.7 3.8-1.2 7.2-1.7 10.2h-.3c-.5-3.3-1.1-6.7-1.7-10.3-.7-3.6-1.6-8.3-2.9-14.1-1.2-5.9-3-13.8-5.3-23.9-2.3-10.1-5.4-23.3-9.2-39.6h-26.8l34.2 120.2zm246.9-89.2h-23.4v51.4c-.3 7.8-2.3 13.2-6.2 16.1-3.8 2.9-7.8 4.3-11.9 4.2-3.8.2-7.2-.9-10.3-3.1-3.1-2.2-4.7-6.7-4.9-13.4v-55.3h-23.4v58.6c.2 11.3 3 19.6 8.6 24.9 5.5 5.3 12.8 7.9 21.7 7.9 6.2 0 11.6-1.3 16.2-3.9s8.2-6.2 10.9-11h.3v12.5h22.4v-88.9zm111.6-9.9h36.3v-21.3h-97.8V812h36.3v99.1h25.2m69.7-24.5h25.1V911h-25.1zm165.1-95.9h-23.4v42.7h-.3c-1.7-3.1-4.6-6.1-8.6-9.1s-9.7-4.6-17.2-4.8c-6.6 0-12.7 1.7-18.3 5-5.6 3.4-10.1 8.4-13.5 15.2-3.4 6.8-5.1 15.3-5.2 25.6 0 8.3 1.3 16.1 3.8 23.3 2.6 7.2 6.6 13.1 12.2 17.6 5.5 4.5 12.7 6.8 21.5 7 5 .1 9.8-.9 14.4-3s8.4-5.6 11.4-10.5h.3V911h22.9V790.7zm-62.5 76.5c-.1-7.3 1.4-13.6 4.4-18.9 3-5.3 8.2-8.1 15.6-8.4 5.3.1 9.4 1.5 12.4 4.3 2.9 2.8 5 6.3 6.1 10.6 1.1 4.3 1.7 8.9 1.7 13.8.1 6.9-1.5 12.8-4.8 17.8s-8.6 7.6-16 7.9c-5-.2-8.9-1.7-11.7-4.6-2.8-3-4.8-6.5-5.9-10.6-1.3-4.4-1.9-8.2-1.8-11.9zm172.4 17.7c-1 3.2-3 5.6-5.8 7.3-2.8 1.6-5.9 2.5-9.3 2.5-6.2-.1-10.8-1.5-13.7-4.2-2.9-2.6-4.8-5.6-5.7-9-.9-3.4-1.4-6.3-1.5-8.6h61.1v-4.2c-.2-13.4-2.5-23.7-6.9-30.8-4.4-7.1-9.8-12-16.2-14.6s-12.6-3.8-18.7-3.7c-9.7.2-17.4 2-23.1 5.5-5.8 3.5-10 7.9-12.8 13-2.8 5.1-4.7 10.1-5.5 15-.9 4.9-1.3 8.7-1.2 11.6.3 18.1 4.5 30.8 12.8 38.1 8.2 7.3 18.8 10.9 31.6 10.6 5.2.1 10.4-.8 15.6-2.6 5.2-1.8 9.9-4.8 14.1-8.9 4.2-4.2 7.4-9.8 9.5-16.9l-24.3-.1zm-35.3-27.2c.7-5.9 2.5-10.5 5.5-13.8 3-3.3 7.2-5 12.8-5 4-.1 7.8 1.2 11.4 4 3.6 2.8 5.9 7.7 6.7 14.8h-36.4z"/>
    </g>
</svg>

css部分

body 
    {
        margin: 0; 
        height: 100%; 
        overflow: hidden
  }

.wrapper
            {
            min-width: 320px;
            max-width: 4096px;
            width: 100%;
            height: calc(100vh - 0.4vw);
            float:left;
        }
    .size
        {
        width:100px;
        }

6 个答案:

答案 0 :(得分：5)

如果您将SVG文件作为组件导入：

import { ReactElement as ComponentName } from "./file.svg"

您可以使用transform: scale(2)上的CSS <ComponentName />更改大小，这可以在React中使用className或全局CSS文件来实现。

肥胖：要更改颜色，您可以使用.componentClass path { fill: "color" }，但如果您更改.componentClass path的比例，即使您更改width和{{ 1}}在组件height上，这实际上将更改SVG容器的大小，而不是内容的大小。

答案 1 :(得分：1)

嗨，我不确定您的webpack如何配置来解析模块。但这是您的解决方案：

import React, { Component } from 'react';
import logo from './logo.svg'

const SvgIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
  <g transform="translate(0,0)">
    <title>Logo</title>
    <path fill="#009FE3" d="M36.9 707.8H1747V1000H36.9" />
    <path d="M385 104.1h1.7l138.7 503.5h86.3L771.6.1h-90.5L567.7 494.2H566L429.8.1h-89.7L203.9 494.2h-1.7L88.8.1H0l158.3 607.5h86.2m889.6-119.4c-16.2 22.1-35.4 38.8-57.7 50.3-22.3 11.5-47 17.3-74.2 17.3-12 .2-26.4-2.9-43.3-9.2-16.9-6.3-31.9-16.8-45-31.5-13.1-14.7-20-34.7-20.8-59.9.3-31.5 9.5-56.9 27.6-76.1 18.1-19.2 43.6-38.7 76.4-58.3l137 167.4zm-110.9-252.1c-12.5-11.9-25.4-27.4-38.6-46.5-13.2-19.1-20.4-38.8-21.5-59.2-.3-7.2 1.2-15.9 4.5-26.1 3.3-10.2 10.1-19.3 20.3-27.3 10.2-8 25.6-12.1 46.2-12.6 13.5-.6 27.4 3.8 41.8 13.1 14.4 9.3 22.2 27.2 23.4 53.7-1.2 25.6-9.8 46.7-26 63.5-16.1 16.9-32.8 30.7-50.1 41.4zm195.5 240.3c15.5-29 27.2-56.8 35-83.4 7.8-26.6 12.5-50.4 14.1-71.4h-70.2c-3.5 21.2-6.9 38-10 50.2-3.2 12.2-8 27.1-14.5 44.5l-110.8-132c15.5-10 31.5-21.9 48.2-35.8 16.7-13.9 30.9-30.8 42.6-50.8 11.7-20 17.8-44.1 18.3-72.4.3-31.8-10.4-60.3-32.2-85.4-21.8-25.1-56.4-38.3-103.9-39.8-46.7 1.3-82.3 15-106.8 41.3-24.5 26.3-36.8 57.6-37 94-.1 25.2 5.2 47.4 15.7 66.6 10.5 19.2 26.7 41.9 48.6 67.9-54.9 30.5-91.8 60-110.7 88.3-18.9 28.3-27.6 62.6-26.3 102.9-.6 16.6 3.6 37.2 12.6 61.9 9 24.7 26.4 46.7 52.3 66.2 25.8 19.5 63.7 29.8 113.5 30.9 43.6-.5 79-8.2 106.1-23.3 27.1-15 50.7-34.6 70.6-58.8l56.7 69.3h96.4l-108.3-130.9zm70.1-403.7h205.6v534.8h82V72.7H1782V0h-493.2" />
    <path fill="#FFF" d="M343.3 821.9h-24.1L305.3 886h-.3l-13.4-64.1h-23.7L255.4 886h-.4l-13.9-64.1h-24.9l25.1 89.2h24.1l13.9-65h.4l13.9 65h24.1m192.6-89.2h-24.1L472.3 886h-.3l-13.4-64.1H435L422.4 886h-.3l-13.9-64.1h-25.1l25.2 89.2h24.2l13.9-65h.3l13.9 65h24.1m192.7-89.2h-24.1L639.4 886h-.4l-13.5-64.1h-23.6L589.3 886h-.3l-13.9-64.1h-25l25.2 89.2h24.1l13.9-65h.3l13.9 65h24.2m69.3-24.5h25.1V911H721zm109.4 24.5h23.4c3.2-15.3 5.8-27.8 7.8-37.6 2-9.7 3.7-17.7 4.9-23.9 1.3-6.2 2.3-11.8 3.2-16.6.9-4.9 1.7-10.1 2.6-15.7h.3c1 5.6 1.9 11 2.9 16.1.9 5.1 2 10.9 3.3 17.3 1.3 6.5 2.9 14.5 4.9 24.1 2 9.6 4.5 21.7 7.6 36.3h24.1l33.8-120.2h-25.5c-3.9 16.4-7 29.7-9.4 40-2.4 10.3-4.2 18.5-5.5 24.5-1.3 6-2.3 10.7-3 14.2-.7 3.5-1.3 6.5-1.7 9.2h-.3c-.6-3.7-1.3-7.4-2-11-.7-3.6-1.6-8.3-2.7-14-1.2-5.7-2.8-13.5-4.9-23.5-2.1-10-4.9-23.1-8.4-39.4h-26.6c-3.2 15.6-5.7 28.5-7.7 38.6-2 10.1-3.5 18.2-4.7 24.3-1.1 6.1-2 11.1-2.7 14.8-.7 3.8-1.2 7.2-1.7 10.2h-.3c-.5-3.3-1.1-6.7-1.7-10.3-.7-3.6-1.6-8.3-2.9-14.1-1.2-5.9-3-13.8-5.3-23.9-2.3-10.1-5.4-23.3-9.2-39.6h-26.8l34.2 120.2zm246.9-89.2h-23.4v51.4c-.3 7.8-2.3 13.2-6.2 16.1-3.8 2.9-7.8 4.3-11.9 4.2-3.8.2-7.2-.9-10.3-3.1-3.1-2.2-4.7-6.7-4.9-13.4v-55.3h-23.4v58.6c.2 11.3 3 19.6 8.6 24.9 5.5 5.3 12.8 7.9 21.7 7.9 6.2 0 11.6-1.3 16.2-3.9s8.2-6.2 10.9-11h.3v12.5h22.4v-88.9zm111.6-9.9h36.3v-21.3h-97.8V812h36.3v99.1h25.2m69.7-24.5h25.1V911h-25.1zm165.1-95.9h-23.4v42.7h-.3c-1.7-3.1-4.6-6.1-8.6-9.1s-9.7-4.6-17.2-4.8c-6.6 0-12.7 1.7-18.3 5-5.6 3.4-10.1 8.4-13.5 15.2-3.4 6.8-5.1 15.3-5.2 25.6 0 8.3 1.3 16.1 3.8 23.3 2.6 7.2 6.6 13.1 12.2 17.6 5.5 4.5 12.7 6.8 21.5 7 5 .1 9.8-.9 14.4-3s8.4-5.6 11.4-10.5h.3V911h22.9V790.7zm-62.5 76.5c-.1-7.3 1.4-13.6 4.4-18.9 3-5.3 8.2-8.1 15.6-8.4 5.3.1 9.4 1.5 12.4 4.3 2.9 2.8 5 6.3 6.1 10.6 1.1 4.3 1.7 8.9 1.7 13.8.1 6.9-1.5 12.8-4.8 17.8s-8.6 7.6-16 7.9c-5-.2-8.9-1.7-11.7-4.6-2.8-3-4.8-6.5-5.9-10.6-1.3-4.4-1.9-8.2-1.8-11.9zm172.4 17.7c-1 3.2-3 5.6-5.8 7.3-2.8 1.6-5.9 2.5-9.3 2.5-6.2-.1-10.8-1.5-13.7-4.2-2.9-2.6-4.8-5.6-5.7-9-.9-3.4-1.4-6.3-1.5-8.6h61.1v-4.2c-.2-13.4-2.5-23.7-6.9-30.8-4.4-7.1-9.8-12-16.2-14.6s-12.6-3.8-18.7-3.7c-9.7.2-17.4 2-23.1 5.5-5.8 3.5-10 7.9-12.8 13-2.8 5.1-4.7 10.1-5.5 15-.9 4.9-1.3 8.7-1.2 11.6.3 18.1 4.5 30.8 12.8 38.1 8.2 7.3 18.8 10.9 31.6 10.6 5.2.1 10.4-.8 15.6-2.6 5.2-1.8 9.9-4.8 14.1-8.9 4.2-4.2 7.4-9.8 9.5-16.9l-24.3-.1zm-35.3-27.2c.7-5.9 2.5-10.5 5.5-13.8 3-3.3 7.2-5 12.8-5 4-.1 7.8 1.2 11.4 4 3.6 2.8 5.9 7.7 6.7 14.8h-36.4z" />
  </g>
</svg>)

class Logo extends Component {
  render() {
    return (
      <div style={{height:'200px',
      width: '500px'}} className="size">
        <SvgIcon />
      </div>
    );
  }
}

export default Logo

答案 2 :(得分：0)

尝试一下，它将运行完美。

import Logo from "./logo.svg";
            <img
              src={Logo}
              style={{ height: 53, width: 36 }}
              alt="website logo"
            />

答案 3 :(得分：0)

在文本编辑器中打开 SVG 文件并从根节点中删除 width 和 height 属性

答案 4 :(得分：0)

这可以通过直接编辑相应的 SVG 代码轻松完成。见下图：

<svg id="_x31_" enable-background="new 0 0 24 24" height="250" viewBox="0 0 24 24" width="250" xmlns="http://www.w3.org/2000/svg"><path d="m20.5 18h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m13.5 9h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m10.5 12h-7c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h7c.276 0 .5.224.5.5s-.224.5-.5.5z"/><path d="m8.5 15h-5c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h5c.276 0 .5.224.5.5s-.224.5-.5.5z"/></svg>

您只需要分别更改 height 和 width 属性即可。

答案 5 :(得分：-1)

您必须进行：

import logo from './logo.svg'
const Logo = () => {

return (
  <logo height='200px' width='500px' alt="tuvieja"/>
);
}

}

相关问题
最新问题