Html 在（较小）容器中居中（宽）SVG元素，同时保持原始SVG宽度 问题:

无法将宽svg居中（同时保留其原始宽度和高度）放置在“不宽”容器中

步骤： 我设计了一个SVG元素，它的默认宽度为

3000px

，我希望保留它（我不希望它缩放或使用

width=100%

来缩小或扩展SVG）

我想将SVG元素放在一个容器中，该容器具有

width=“100%”

和固定高度，比如说

250px

。我尝试将SVG居中，例如，如果我的屏幕只有

1280px

宽，SVG的第一部分（和最后一部分）

860px

将不可见

*计算：（3000-1280）/2=860*

关于如何实现这一点，有什么想法或帮助吗？我尝试使用transform/translate在容器中移动SVG，但没有任何积极的结果

我越来越绝望了：(

代码： （编辑以包括原始样式的组件实现）

从“React”导入React
从“样式化组件”导入样式化
//使用样式化组件
const Container=styled.div`
显示器：flex；
位置：绝对位置；
左：0；
右：0；
宽度：100%；
高度：250px；
文本对齐：居中；
保证金：0自动；
svg{
不透明度：1；
保证金：0自动；
位置：绝对位置；
底部：0；
}
`;
类应用程序扩展了React.Component{
render（）{
返回
}
}

视觉期望结果：

---

您需要做的就是将以下内容添加到SVG中

<svg ... preserveAspectRatio="xMidYMid slice">
   ...etc...
</svg>

等

您的CSS中有一个错误。您的

svg

元素根本没有被设置样式。请通过在

svg

块中设置例如

opacity:0.2；

来尝试。您应该将CSS中的

svg

移动到

容器

规则之外。除非您确实在使用SCSS或类似的预处理器，否则，rath比普通CSS更简单。@user2740650我使用的是样式化组件，所以从技术上讲，它看起来更像：

const Container=styled.div

[styles from above]`好的，您发布了无效的CSS并将其标记为CSS:-）。请更正您的帖子，以便其他人不会浪费时间调试您没有真正遇到的问题。您应该提供一个没有错误的简单示例，或者清楚您的上下文。理想情况下，您可以生成一个人们可以尝试的自包含示例（例如，在codepen或类似的工具上）。@user2740650刚刚更新为包含样式化组件。我最初删除了它，因为这不是与样式化组件或react相关的问题，而是css和svg。。。希望这有助于澄清我最初的问题。

<svg ... preserveAspectRatio="xMidYMid slice">
   ...etc...
</svg>