带你了解HTML5 SVG，看看怎么绘制自适应的菱形

1. 什么是HTML5 SVG

HTML5 SVG（Scalable Vector Graphics，可伸缩矢量图形）是HTML5新特性之一，它是一种基于XML的2D矢量图形格式，用于描述图形、图表、动画等。与位图不同，SVG是一种矢量图形格式，可以无限缩放而不会失真，而且可以被搜索引擎解读，这使得它成为Web开发中不可或缺的一部分。

SVG图形由定义形状、位置和样式的可缩放形状元素组成，可以在HTML文档中嵌入或作为单独的文件使用。通过使用JavaScript和CSS，可以在SVG图形中添加交互性和动画效果。

2. 绘制自适应的菱形

2.1 定义SVG

要绘制自适应的菱形，需要在HTML文档中嵌入SVG元素。可以使用以下代码定义一个SVG元素：

<svg xmlns="http://www.w3.org/2000/svg"

    width="100%" height="100%"
    viewBox="0 0 800 800">
</svg>

以上代码定义了一个SVG元素，其中的xmlns属性指定SVG命名空间，它是必需的。width和height属性指定SVG的宽度和高度，这里指定为100%以使SVG自适应其容器。viewBox属性定义了SVG的坐标系，它指定了可见的部分，这里设置为0 0 800 800。

2.2 绘制菱形

要在SVG中绘制菱形，可以使用<polygon>元素，该元素定义一个多边形，它的点由points属性指定。以下是绘制菱形的代码：

<svg xmlns="http://www.w3.org/2000/svg"

    width="100%" height="100%"
    viewBox="0 0 800 800">
  <polygon points="400,100 700,400
    400,700 100,400" />
</svg>

以上代码在SVG中绘制了一个点在（400,100）、（700,400）、（400,700）、（100,400）的四边形，也就是一个菱形。如下图所示：

<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="0 0 800 800">

<polygon points="400,100 700,400 400,700 100,400" />

</svg>

2.3 CSS样式

菱形已经绘制出来了，但是它看上去有点不舒服。为了美化它，我们可以添加CSS样式。

<svg xmlns="http://www.w3.org/2000/svg"

     width="60%" height="60%"
     viewBox="0 0 100 100"
     preserveAspectRatio="none"
     style="background-color: #f5f5f5">
  <polygon points="50,0 100,50
     50,100 0,50"
     style="fill: #4d4d4d; stroke: #4d4d4d; stroke-width:2px;" />
</svg>

以上代码将SVG和多边形的大小都调整为60%。添加了preserveAspectRatio属性，该属性指定了如何缩放SVG元素以适配其容器，这里设置为none，表示保持纵横比例不变，并填满整个容器。添加了style属性，用于指定SVG元素的背景颜色。

菱形的样式也得到了更新。我们通过在style属性中添加CSS样式来修改它。以下代码将菱形的颜色更改为深灰色：

<svg xmlns="http://www.w3.org/2000/svg"

width="30%" height="30%"

viewBox="0 0 100 100"

preserveAspectRatio="none"

style="background-color: #f5f5f5">

<polygon points="50,0 100,50 50,100 0,50"

style="fill: #4d4d4d; stroke: #4d4d4d; stroke-width:2px;" />

</svg>

2.4 自适应大小

现在，菱形已经比以前更美了，但是它的大小仍然固定。为了使菱形自适应其容器的大小，我们可以使用JavaScript。以下是实现自适应大小的代码：

<div id="diamond-container">

  <svg xmlns="http://www.w3.org/2000/svg"
       width="100%" height="100%"
       viewBox="0 0 100 100"
       preserveAspectRatio="none"
       style="background-color: #f5f5f5">
    <polygon points="50,0 100,50 50,100 0,50"
             id="diamond"
             style="fill: #4d4d4d; stroke: #4d4d4d; stroke-width:2px;" />
  </svg>
</div>
<script>
  function resizeDiamond() {
    var container = document.getElementById("diamond-container");
    var width = container.offsetWidth;
    var height = container.offsetHeight;
    var diamond = document.getElementById("diamond");
    diamond.setAttribute("points", "50,0 " + width + "," + height/2 +
                          " 50," + height + " 0," + height/2);
  }
  resizeDiamond();
  window.addEventListener("resize", function() {
    resizeDiamond();
  });
</script>

以上代码首先定义了一个包含SVG元素的<div>元素，该元素的大小可以自由调整。resizeDiamond()函数计算了容器的大小，并动态修改了菱形的点以适应容器的大小。window.innerWidth和window.innerHeight属性可用于计算窗口的大小，并通过setAttribute()函数更新菱形的points属性。最后，我们将resizeDiamond()函数绑定到窗口的resize事件上，以便在浏览器窗口大小改变时自动调整菱形的大小。

这样，我们就成功地绘制出了一个自适应的菱形：

<div id="diamond-container">

<svg xmlns="http://www.w3.org/2000/svg"

width="100%" height="100%"

viewBox="0 0 100 100"

preserveAspectRatio="none"

style="background-color: #f5f5f5">

<polygon points="50,0 100,50 50,100 0,50"

id="diamond"

style="fill: #4d4d4d; stroke: #4d4d4d; stroke-width:2px;" />

</svg>

</div>

<script>

function resizeDiamond() {

var container = document.getElementById("diamond-container");

var width = container.offsetWidth;

var height = container.offsetHeight;

var diamond = document.getElementById("diamond");

diamond.setAttribute("points", "50,0 " + width + "," + height/2 +

" 50," + height + " 0," + height/2);

}

resizeDiamond();

window.addEventListener("resize", function() {

resizeDiamond();

});

</script>

3. 总结

本文介绍了HTML5 SVG，以及如何使用SVG绘制自适应的菱形。我们使用<polygon>元素绘制了菱形，使用CSS样式美化了它，并使用JavaScript实现了自适应大小。希望这篇文章能够让你了解SVG的基本用法，并为你的Web开发工作带来帮助。