【问题标题】：Center (wide) SVG Element within (smaller) Container while keeping original SVG width在（较小）容器内居中（宽）SVG 元素，同时保持原始 SVG 宽度
【发布时间】：2020-09-19 03:18:16
【问题描述】：

问题：

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

步骤：

我设计了一个默认宽度为 3000px 的 SVG 元素，我想保留它（我不希望它缩放或使用 width=100% 缩小或扩展 SVG）。

我想将 SVG 元素放置在具有width="100%" 和固定高度的容器中，比如250px。我正在尝试使 SVG 居中，例如如果我的屏幕只有 1280px 宽，则 svg 的第一部分（也是最后一部分）860px 将不可见。

*计算：(3000-1280)/2 = 860 *

关于如何实现这一目标的任何想法或帮助？我尝试使用转换/翻译将 SVG 移动到容器内，但没有积极的结果...

我越来越绝望了:(

代码：

（已编辑以包括原始样式组件实现）

import React from 'react'
import styled from 'styled-components'

// Using styled-components 
const Container = styled.div`
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 250px;
    text-align: center;
    margin: 0 auto;

    svg {
        opacity:1;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
    }

`;

class App extends React.Component {
render(){
return <Container>
    <svg xmlns="http://www.w3.org/2000/svg" width="3000" height="250" viewBox="0 0 3000 250">
        <path
            id="Path_19510"
            data-name="Path 19510"
            d="M3000,477s-200,5-356,115-336,106-423,65c-42.736-20.14-85.29-30.391-117.537-35.613-39.32-8.192-83.3-7.111-121.162,1.629-100.53,23.2-271.333,200.166-392.685,78.826-108.44-108.422-192.276-65.146-231.863-79.47-51.647-18.685-39.84-75.2-109.955-102.123-44.932-17.247-111.989,2.153-169.479,21.616l-.028.01h0c-31.022,10.5-59.25,21.016-79.711,25.8a266.054,266.054,0,0,1-47.2,4q-6.693-.333-13.233-1.2C886.09,560.723,855.088,493.629,802,474c-119-44-240,40-425,128C199.67,686.351,0,463,0,463V768l1168.438-.005L2140,768h860Z"
            transform="translate(0 -461.932)"
fill="#000"
        />
    </svg>
</Container>
}
}

视觉期望结果：

Desired result to be achieved

【问题讨论】：

您的 CSS 有错误。您的 svg 元素根本没有设置样式。通过在 svg 块中设置例如 opacity: 0.2; 来尝试它。您应该将 CSS 中的 svg 移到 .container 规则之外。
除非你真的使用 SCSS 或一些类似的预处理器，而不是纯 CSS。
@user2740650 我正在使用 styled-component，所以从技术上讲，它看起来更像这样：const Container = styled.div[styles from above]`
好的，你发布了无效的 CSS 并将其标记为 CSS :-) 。请更正您的帖子，以免其他人浪费时间调试您没有真正遇到的问题。您应该提供一个没有错误的简单示例，或者清楚您的上下文。理想情况下，您可以制作一个人们可以尝试的独立示例（例如，在 codepen 或类似的工具上）。
@user2740650 刚刚更新为包含样式组件。我最初删除了它，因为这不是与样式组件或反应相关的问题，而是 css 和 svg ......希望这有助于澄清我最初的问题。

标签： html css svg

【解决方案1】：

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

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

【讨论】：