为什么我的 SVG 被裁剪而不是缩放？答案

【问题标题】：Why Is my SVG getting cropped instead of scaled?为什么我的 SVG 被裁剪而不是缩放？
【发布时间】：2021-07-31 12:11:10
【问题描述】：

这是我的 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>
      )
}

导出默认地图

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

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

【问题讨论】：

你能发布你的反应代码吗？我只是问，因为您说它在 html/css 中运行良好。您如何将 svg 导入您的反应应用程序？你在使用 create-react-app 吗？
当然可以，但我真的只把它放在 return() 里面。

标签： html css reactjs svg

【解决方案1】：

了解这里发生的事情的关键是viewbox。

您的视图框是正确的，但要在 html 中使用它，您必须使用 view-box 而不是 viewbox 就像您在代码示例中使用的那样。

在 react.js 中，您必须像这样使用它：viewBox，因为使用 react.js 您必须在标记变量中将 kebab-case 替换为 camelCase。

这是解决它的codeandbox：

https://codesandbox.io/s/suspicious-dhawan-pwmmq?file=/src/App.js

您可以将宽高修改为任意值，svg 仍然会响应！

【讨论】：

更改视图框并没有修复它，它之前使用这些视图框尺寸虽然在我将它放入反应之前。
你能把 svg 上传到某个地方吗？
或者在codesandbox或类似的地方复制错误？您也可以上传 svg 数据！
当然，这应该可以：codesandbox.io/embed/…
如果您可以发回一个代码框来修复错误，那将非常有帮助。 @马丁