当前位置: 首页 > 知识库问答 >
问题:

使用CSS更改SVG Viewbox大小

潘佐
2023-03-14
<style>
    div{
        width: 100%;
        height: 500px;
        background-color: #00ffff;
    }

    svg{
        width: 50%;
        background-color: #ffff00;
    }
</style>

<div>
    <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>
</div>

对象SVG和img SVG不能为我的目的工作。它必须是内联的。解决方案不必是CSS...JavaScript绝对是一个可以接受的解决方案。)

共有1个答案

许茂才
2023-03-14

基于@Paulo Coghi的答案,这对我来说是最好的答案(在几个小时的测试失败和没用的谷歌搜索之后,是谁拯救了我):

只需将svg转换为:

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>

进入:

<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
    <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    // and/or whatever you want
</svg>
svg {
    max-width: 100%;
    max-height: 100%;
    // or any other units or measurements you want
}
 类似资料:
  • 我已经尝试了几天,现在配置我的缩略图库,使所有的图像显示相同的高度和宽度。但是,当我将CSS代码更改为, 我得到的图像大小都一样,但纵横比被拉伸,破坏了图像。有没有办法调整图像容器的大小而不是图像?允许我保持纵横比,但仍然调整图像大小。(我不介意剪掉一些图片。)

  • 问题内容: 有没有一种方法可以控制CSS中单选按钮的大小? 问题答案: 是的,您应该能够像设置任何元素一样设置其高度和宽度。但是,某些浏览器并没有真正考虑这些属性。 如您所见,设置单选按钮的样式并不容易:-D

  • 问题内容: 有没有一种方法可以使用jQuery更改CSS类的属性,而不是元素属性? 这是一个实际的例子: 我上课有一个div 我想更改类背景属性,而不是已分配类背景的元素。 如果我使用jQuery .css()方法做到这一点: 它会影响现在具有class的元素。到这里为止一切都很好。但是,如果我进行Ajax调用,并在class中插入更多div ,则这些背景将不会具有绿色背景,而它们将具有初始背景。

  • 问题内容: 使用javascript设置内联CSS值很容易。如果我想更改宽度,并且我有这样的html: 我需要做的是: 它将更改内联样式表的值。通常这不是问题,因为内联样式会覆盖样式表。例: 使用此Javascript: 我得到以下内容: 这是一个问题,因为当我有以下条件时,不仅要更改内联值,而且要在设置宽度之前先查找宽度: 返回的值为Null,因此,如果我有Javascript需要知道某种东西的

  • 问题内容: 我需要找到一种使用JavaScript更改CSS:hover属性的方法。 例如,假设我有以下HTML代码: 以及以下CSS代码: 我想使用JavaScript将悬停属性更改为例如background:#00ff00。知道我可以使用JavaScript通过以下方式访问样式背景属性: 但是我不知道:hover的JavaScript等效项。如何使用JavaScript更改这些的:hover背

  • 问题内容: 我正在尝试使用JavaScript更改图像的大小。jS文件与HTML页面分开。 我想在JS文件中设置图像的高度和宽度。有什么好的方法吗? 问题答案: 引用图像后,就可以像这样设置其高度和宽度: 在html中,它看起来像这样: