Behold my amazing SVG tag:
<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">
The issue arises when I attempt to adjust the width of this element using CSS, as it results in cropping rather than scaling. Even changing the height and width to 100% did not yield the desired outcome.
Previously working flawlessly in standard HTML and CSS, this component faced challenges after being ported into a React environment. Despite hours of troubleshooting, only 'scale()' in CSS showed some effectiveness, albeit failing to dynamically scale with the window size.
For reference, here is the corresponding React code snippet:
import React from 'react'
function map() {
return (
<div>
<SVG>...</SVG>
</div>
)
}
export default map
Additionally, this tag is utilized within the following context:
function book() {
return (
<body>
<div id="map-container">
<Map/>
</div>
</body>
)
}