SVG 设置颜色、margin和 padding

SVG Scalable Vector Graphics 原始文件，可以通过下面方式设置 SVG 的 margin 和 padding，以及颜色。

1. SVG 使用 <style> 标签：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      margin: 10px;
      padding: 5px;
    }
  </style>
  <!-- 其他SVG内容 -->
</svg>

2. SVG 使用style属性：

<svg width="100" height="100" style="margin: 10px; padding: 5px;" xmlns="http://www.w3.org/2000/svg">
  <!-- 其他SVG内容 -->
</svg>

viewBox 定义了一个 100x100 的内部坐标系统，通过设置 padding，可以在SVG元素内部创建一个边距效果。

注意事项

SVG 的 margin 和 padding 与 HTML 元素的 margin 和 padding 略有不同。SVG 的 margin 和 padding 是相对于 SVG 元素的视口 -> viewport 来计算的，而不是相对于父元素。
SVG 的 margin 和 padding 可能不会像HTML元素那样影响布局，因为SVG元素通常是以坐标系统为基础进行布局的。

如果你将 SVG 作为 HTML 文档的一部分，那么 SVG 的 margin 和 padding 将会受到 CSS 的影响。

通过这些方法，你可以在 SVG 文件中设置 margin 和 padding，以实现所需的布局效果。

SVG 颜色的设置：

设置 SVG 颜色，可以使用 fill 属性：

<circle cx="50" cy="50" r="40" stroke="black" fill="red"/>

设置 SVG 颜色，使用 stroke 属性：

<circle cx="50" cy="50" r="40" stroke="blue" fill="green"/>

设置 SVG 颜色，使用 style 属性：

<circle cx="50" cy="50" r="40" style="fill: yellow; stroke: purple;"/>

设置 SVG 颜色，使用 class 和 CSS：

<circle cx="50" cy="50" r="40" class="my-circle"/>

.my-circle {
  fill: green;
  stroke: black;
}

设置 SVG 颜色，使用 JavaScript：

var circle = document.getElementById('my-svg');
circle.setAttribute('fill', 'orange');

设置 SVG 颜色，SVG 支持线性渐变和径向渐变 - Gradients：

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

SVG 设置颜色、margin和 padding

1. SVG 使用 <style> 标签：

2. SVG 使用style属性：

SVG 颜色的设置：

SVG 扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论