Question

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

Answer 1

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

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

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

这是解决它的代码和盒子：

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

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

更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

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

1 个答案: