Question

我想创建一组svg图像并将其放在div中。当div被调整大小时（在javascript中），我希望宽度改变，而不改变其中的内容，给出resized div覆盖内容的效果（例如切割div的宽度）一半将隐藏内容的一半。

这可以通过html实现吗？

这是js fiddle。按下按钮时，div宽度变为较小的尺寸。我希望它隐藏svg的一部分。

<div id="container">

 <svg width="400" height="280">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>


  <rect x="90" y="50" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"></rect>
 </svg>

</div>

Answer 1

这是一个只有CSS的快速修复，不需要JavaScript。你可以隐藏＆＃34;溢出＆＃34;溢出属性。

将隐藏的溢出添加到#container：

#container{
    width:50%;
    background-color:white;
    overflow: hidden;
}

您可以使用fiddle修改后的

重试此操作

此外，您的小提琴中还有其他一些事情：您没有在条件语句中使用==。即使你是，你也需要一种以动态宽度开始的方法。所以，这是一个固定的fiddle，只使用了JS的变化。

最后，我会根据该类添加/删除类的方式略有不同，如果该类已添加到该元素中。您可以在fiddle

上查看此处

Answer 2

添加溢出：隐藏或溢出：滚动到您的CSS

#container{
  width:50%;
  background-color:red;
  Overflow:hidden;
}

更改div的宽度而不影响内容

2 个答案: