html - 在 div 内滚动 svg

Question

我有一个简单的用例。我有一个外部 div 和一个 svg 里面。喜欢，

<div>
  <svg>
     ...
     ...
  </svg>
</div>

我试图让 svg 在 div 内滚动，但没有任何运气 :( 我尝试设置:

div {
  position: relative;
  width: 100%;
  overflow: scroll;
}

svg {
  width: 100%;
}

但是还是不行，大家能帮帮我吗？感谢您的帮助!

Answer 1

您必须定义容器高度，否则容器高度将调整为 svg 高度。

html:

<div>
    <svg viewbox="0 0 400 400">
        <path d="M 200 100 l 100 200 l -200 0 Z" stroke-width="5" stroke="red"></path>
    </svg>
</div>

CSS:

div {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

参见 https://jsfiddle.net/Lvnozzn2/1/