让我们懂的svg图片的属性操作问题

SVG（可缩放矢量图形）是基于 XML 语法的二维图形格式，具有高度的可操作性。下面详细介绍 SVG 图片的属性操作方法，包括基础属性、样式控制、事件绑定及动态修改等内容。

1. SVG 基础属性

SVG 元素通过属性定义形状、位置和外观，常见属性包括：

几何属性

• x, y：元素位置（坐标）
• width, height：尺寸
• cx, cy, r：圆形的圆心和半径
• points：多边形或折线的顶点坐标

样式属性

• fill：填充颜色（如fill="red"）
• stroke：描边颜色
• stroke-width：描边宽度
• opacity：透明度（0-1 之间）
• transform：变换（平移、旋转、缩放等）

示例：基础 SVG 元素

svg

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="lightblue" stroke="blue" stroke-width="2" />
  <circle cx="50" cy="50" r="30" fill="white" opacity="0.8" />
  <text x="50" y="55" text-anchor="middle" font-size="14">SVG Text</text>
</svg>

2. 使用 CSS 样式控制

SVG 支持内联样式、内部样式表和外部 CSS 文件，与 HTML 类似。

内联样式

svg

<rect x="10" y="10" width="50" height="50" style="fill:red; stroke:black; stroke-width:2;" />

内部样式表

svg

<svg viewBox="0 0 100 100">
  <style>
    .rectangle {
      fill: lightgreen;
      stroke: green;
      stroke-width: 2;
    }
    .circle {
      fill: yellow;
      stroke: orange;
      opacity: 0.7;
    }
  </style>
  <rect class="rectangle" x="10" y="10" width="80" height="40" />
  <circle class="circle" cx="50" cy="70" r="30" />
</svg>

3. 动态修改 SVG 属性

可以通过 JavaScript 操作 SVG 元素，实现动画或交互效果。

示例：点击改变颜色

html

预览

<svg id="mySvg" viewBox="0 0 100 100" width="200" height="200">
  <circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

<script>
  const circle = document.getElementById("myCircle");
  circle.addEventListener("click", () => {
    // 修改填充颜色和半径
    circle.setAttribute("fill", "red");
    circle.setAttribute("r", "30");
  });
</script>

示例：使用 CSS 过渡实现平滑动画

svg

<svg viewBox="0 0 100 100">
  <style>
    #rect {
      fill: blue;
      transition: fill 0.5s, width 1s;
    }
    #rect:hover {
      fill: red;
      width: 80;
    }
  </style>
  <rect id="rect" x="10" y="10" width="60" height="40" />
</svg>

4. 变换（Transform）属性

通过transform属性可以对 SVG 元素进行平移、旋转、缩放等操作。

常见变换类型

• translate(x, y)：平移
• rotate(angle, cx, cy)：旋转（围绕指定点）
• scale(sx, sy)：缩放
• skewX(angle), skewY(angle)：倾斜

示例：组合变换

svg

<svg viewBox="0 0 100 100">
  <rect x="40" y="20" width="20" height="20" fill="green" 
        transform="rotate(45, 50, 30) translate(10, 0)" />
</svg>

5. 事件绑定

SVG 支持与 HTML 类似的事件，如click、mouseover、mousemove等。

示例：鼠标交互

svg

<svg viewBox="0 0 100 100">
  <circle id="interactiveCircle" cx="50" cy="50" r="40" fill="purple" />
  <text id="statusText" x="50" y="55" text-anchor="middle" fill="white">Hover me</text>

  <script type="text/javascript"><![CDATA[
    const circle = document.getElementById("interactiveCircle");
    const text = document.getElementById("statusText");
    
    circle.addEventListener("mouseover", () => {
      circle.setAttribute("fill", "pink");
      text.textContent = "Mouse over!";
    });
    
    circle.addEventListener("mouseout", () => {
      circle.setAttribute("fill", "purple");
      text.textContent = "Hover me";
    });
  ]]></script>
</svg>

6. 响应式 SVG

通过viewBox属性可以实现 SVG 的自适应缩放，确保在不同尺寸下保持比例。

示例：响应式 SVG

svg

<svg viewBox="0 0 100 100" width="100%" height="100%">
  <rect x="10" y="10" width="80" height="80" fill="orange" />
</svg>

总结

操作类型	方法	示例
修改属性	setAttribute("属性名", "值")	circle.setAttribute("fill", "red")
添加样式类	classList.add("类名")	rect.classList.add("highlight")
事件监听	addEventListener("事件", 回调函数)	circle.addEventListener("click", ...)
变换	transform="rotate(45, 50, 50)"	旋转 45 度（围绕点 50,50）
响应式	viewBox="0 0 100 100" width="100%"	SVG 自动适应容器尺寸