Html 为什么我的SVG会被裁剪而不是缩放？_Html_Css_Reactjs_Svg

Html 为什么我的SVG会被裁剪而不是缩放？

html css reactjs svg

Html 为什么我的SVG会被裁剪而不是缩放？,html,css,reactjs,svg,Html,Css,Reactjs,Svg,这是我的SVG标签： <svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" version="1.2" v

这是我的SVG标签：

<svg 
baseprofile="tiny" 
fill="#ececec" 
height="857" 
stroke="black" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width=".2" 
version="1.2" 
viewbox="0 0 2000 857" 
width="2000" 
xmlns="http://www.w3.org/2000/svg">

问题是，当我在CSS中更改此组件的宽度时，它将裁剪图像，而不是缩放图像。将高度和宽度更改为100%也不起作用

这在标准HTML和CSS中工作得非常好，但当我将其移动到react时，它就停止工作了。我已经搜索了几个小时如何解决这个问题，CSS中只有Scale（）起作用，但我无法根据窗口大小进行缩放

这是代码

import React from 'react'

function map() {
    return (
        <div>
          <SVG>...</SVG>
        </div>
      )
}

从“React”导入React
函数映射（）{
返回(
...
)
}

导出默认映射

而且这个标签也用在这个里面：

function book() {
    return (
        <body>
            <div id="map-container">
                <Map/>
            </div>
        </body>
    )
}

功能手册（）{
返回(
)
}

了解这里发生了什么的关键是查看框

您的viewbox是正确的，但要在html中使用它，您必须使用

viewbox

，而不是像代码示例中那样使用

viewbox

在react.js中，您必须这样使用它：

viewBox

，因为使用react.js时，您必须为标记变量中的

camelCase

替换

kebab大小写
以下是解决此问题的代码沙盒：

您可以将宽度和高度修改为任何值，svg仍将响应
更多信息请点击此处：
您可以发布您的代码吗？我这么问是因为你说它在html/css中工作得很好。如何将svg导入react应用程序？您正在使用create react应用程序吗？当然可以，但我实际上只将其放在return（）中。更改视图框并不能修复它，在我将其放在react中之前，它可以处理这些视图框维度。您可以将svg上载到某个地方吗？或者在codesandbox或类似的地方复制错误吗？您也可以上传svg数据！当然，这应该是可行的：如果你能发送一个修复错误的codesandbox，那将非常有用@马丁