使用CSS自定义属性轻松调整SVG大小-html教程-PHP中文网

使用CSS自定义属性轻松调整SVG大小

心靈之曲

发布： 2025-09-29 19:39:00

原创

552人浏览过

使用css自定义属性轻松调整svg大小

本文介绍了一种使用CSS自定义属性（也称为CSS变量）来调整SVG大小的简便方法，无需修改SVG代码本身。通过将SVG包裹在具有特定CSS类的div中，并利用--svgWidth和--svgHeight自定义属性，可以灵活地控制SVG的尺寸，同时保持其宽高比。这种方法避免了直接修改SVG内部属性的复杂性，使得SVG的缩放更加简单和可维护。

使用CSS自定义属性调整SVG大小

在Web开发中，SVG（Scalable Vector Graphics）是一种常用的矢量图形格式，它具有可缩放、无损等优点。然而，直接修改SVG代码来调整其大小可能比较繁琐。本文将介绍一种使用CSS自定义属性（CSS Custom Properties）来动态调整SVG大小的方法，无需修改SVG本身的内部代码。

步骤

创建包含SVG的容器: 首先，将需要调整大小的SVG代码包裹在一个div元素中，并为该div指定一个CSS类名，例如svgSize。

<div class="svgSize">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096"
  >
    <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
    <g transform="scale(8.571428571428571) translate(10, 10)">
      <defs id="SvgjsDefs2369" />
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
      <g transform="matrix(...)"></g>
    </g>
  </svg>
</div>

登录后复制

定义CSS样式: 接下来，在CSS中定义.svgSize类的样式，并使用CSS自定义属性--svgWidth和--svgHeight来控制SVG的宽度和高度。

立即学习“前端免费学习笔记（深入）”；

移动端UI&微信UI YDUI Touch
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

81

查看详情
```
.svgSize {
  display: inline-flex;
  height: var(--svgHeight, auto);
  width: var(--svgWidth, auto);
}
.svgSize svg {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
```
登录后复制
- display: inline-flex;: 使div成为一个行内弹性容器，方便控制SVG的对齐方式。
- height: var(--svgHeight, auto); 和 width: var(--svgWidth, auto);: 使用CSS自定义属性--svgHeight和--svgWidth来设置div的高度和宽度。如果未定义这些属性，则默认值为auto，即SVG会根据其内容自动调整大小。
- height: auto; width: auto; max-height: 100%; max-width: 100%;: 确保SVG元素本身的高度和宽度自动调整，并且不超过其父容器（即div.svgSize）的尺寸，从而保持SVG的宽高比。
使用内联样式设置自定义属性: 最后，可以通过内联样式来设置--svgWidth和--svgHeight的值，从而调整SVG的大小。
```
<div class="svgSize" style="--svgWidth: 5rem">
  
</div>

<div class="svgSize" style="--svgHeight: 15rem">
  
</div>

<div class="svgSize" >
  
</div>
```
登录后复制
- style="--svgWidth: 5rem": 将SVG的宽度设置为5rem。
- style="--svgHeight: 15rem": 将SVG的高度设置为15rem。
- : 如果未设置--svgWidth和--svgHeight，SVG将根据其内容自动调整大小。

示例

以下是一个完整的示例，展示了如何使用CSS自定义属性来调整SVG的大小：

<!DOCTYPE html>
<html>
<head>
<style>
.svgSize {
  display: inline-flex;
  height: var(--svgHeight, auto);
  width: var(--svgWidth, auto);
}
.svgSize svg {
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
}
</style>
</head>
<body>

<div class="svgSize" style="--svgWidth: 5rem">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" style="--svgHeight: 15rem">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

<div class="svgSize" >
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    width="3171.4285714285716"
    height="2645.5238095238096"
    viewBox="0 -25.714285714285715 3171.4285714285716 2645.5238095238096">
     <rect fill="#67b231" width="3171.4285714285716" height="2645.5238095238096" />
     <g transform="scale(8.571428571428571) translate(10, 10)">
        <defs id="SvgjsDefs2369" />
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
        <g transform="matrix(...)"></g>
     </g>
  </svg>
</div>

</body>
</html>

登录后复制

注意事项

浏览器兼容性: CSS自定义属性在现代浏览器中得到了广泛支持。但是，为了兼容旧版本的浏览器，可能需要使用polyfill。
宽高比: 默认情况下，SVG会保持其宽高比。如果需要强制改变宽高比，可以修改.svgSize svg的样式，例如设置width: 100%; height: 100%;。但是，这可能会导致SVG变形。
复杂的SVG: 对于非常复杂的SVG，可能需要更高级的技巧来调整大小，例如使用JavaScript来动态修改SVG的viewBox属性。

总结

使用CSS自定义属性来调整SVG大小是一种简单而有效的方法。它无需修改SVG代码本身，并且可以灵活地控制SVG的尺寸，同时保持其宽高比。这种方法特别适用于需要在不同场景下显示不同大小的SVG的情况。通过本文的学习，相信你已经掌握了使用CSS自定义属性调整SVG大小的技巧。在实际项目中，可以根据具体需求灵活运用，从而更好地展示SVG图形。

以上就是使用CSS自定义属性轻松调整SVG大小的详细内容，更多请关注php中文网其它相关文章！