Question

我一直在使用CSS在我的网站上玩形状并且它一直都很好但有时候操作它们有点烦人，因为例如三角形，它实际上是一个带边框的矩形。

有关CSS中形状创建的指南，我正在使用CSS-tricks article。

我想使用CSS，因为它比我使用图像的速度更快。

几天过去了，我偶然发现了SVG，我一直在网上看到它们，但从未钻研过它们。所以，我想知道，使用SVG而不是这些CSS'黑客'来实现我的形状会更简单。无法找到关于此特定主题的任何信息，因此有关SVG的任何信息都表示赞赏。（这些形状将是1000px +宽，因此我不想使用图像......）

TL; DR：什么是更好 - 跨浏览器/加载时间 - 想要在网页上拥有形状。我只是看着SVG想知道它是否是一个可行的选择。

<小时/> 的修改

对不起，下面是我目前正在使用的代码，以及我想要实现的图像（不幸的是，设计图像的人没有为设计提供代码，只有图像）。

来源图片

我的代码 （抱歉，如果你不喜欢sass）

<div class="arrow-wrap">
  <div class="arrow">
    <div class="arrow-text">
      <h1>Services</h1>
      <p>Learn more about our services by selecting one below</p>
    </div>
  </div>
</div>

.arrow-wrap
    overflow: hidden;
    display: flex
    justify-content: center
    position: relative
    z-index: 10
    .arrow
        width: 0
        height: 0
        border-style: solid
        border-width: 150px 100vw 0 100vw
        border-color: $dark transparent transparent transparent
        position: relative
        z-index: 1
        display: flex
        justify-content: center
        .arrow-text
            text-align: center
            margin-top: -130px
            white-space: nowrap
            position: relative
            z-index: 5
            h1
                font-size: 50px
                margin: 0
            p
                margin: 0
                color: rgba($white, 0.8)

我的结果图片

所以，因为我不得不捣乱以使文本工作（仍然不完美的缩放），我很想知道是否会采用SVG的方式，即如果SVG是在完成工作/加载时间方面更有效率。

<小时/> 编辑2

也只是想 - 在顶部添加更多空间 - 添加一个坚实的盒子阴影来创造一种不规则的五边形（Found on YouTube here）

Answer 1

同时使用。

CSS

将CSS用于基本形状。基本动画。 就像你在使用CSS生成自定义形状时提到的那样，你所做的就是添加框阴影的边框来创建你想要的形状的幻觉。有些人可能会说这不是未来的证据，可能会破坏任何更新。

SVG

将SVG用于更复杂的形状和动画。 根据您实施SVG的方式，您可以执行某些操作。您可以直接或通过HTML img标记嵌入它们，甚至可以使用JavaScript库将它们注入您的应用程序。

SVG可以通过操纵svg本身的样式来制作动画，但是这（取决于你的目标是什么）可以成为一个非常深的兔子洞。我对SVG动画的建议是使用javascript库。

我的建议是同时使用两者。先了解一下CSS。对我来说，如果你想快速得到东西，那么这条路线似乎不那么容易受阻和最容易学习。另外尝试SVG我过去使用SVG库创建了一些很棒的效果，单独使用CSS是不可能的，它们甚至可以在IE9中工作（不再是它支持了）。

TLDR;

将CSS用于基本形状和动画。

将SVG用于高级形状和动画。

Answer 2

所以回答原来的问题：

如果您考虑将数据从http服务器传输到连接客户端的时间，只要形状是没有动画的简单绘图且不包含自定义曲率或途径或多层。

SVG主要是动画和复杂艺术品的工具。

基本上有两种方法可以渲染更复杂的动画和绘图（我的意思很复杂，就像在网页上的俄罗斯方块游戏中那样）

您可以使用SVG或CANVAS。（还有其他第三方插件，如shockwave / flash等）

但基本上，Canvas是SVG更容易使用的替代方案，原因之一是：它的javascript友好。您可以使用Javascript在Canvas上动态绘制。

你也可以使用Javascript在SVG内联元素上绘图，但如果没有像SVG.JS或SNAP.JS这样的额外javascript库，它就不那么简单了

另一方面，SVG比帆布更容易扩展到不同的尺寸。您只需更改SVG元素的视口并获得已缩放的图像即可。 HTML5画布可以更加绚丽，可以扩展到正确的大小。

CSS在加载方面具有更轻量级和更快的优点，但是复杂的多层动画和其他方面（如图层蒙版/着色器效果）要难得多，因为您必须手动计算所有简单的几何而不是让计算机去做。

所以说到这一点，您可以选择SVG，CSS和HTML5 CANVAS来渲染图像。大多数优秀的网页都有三种组合，因为有些网页以不同的方式比其他网页更好。

我在下面附上了一个示例，说明如何使用您提供的代码以及HTML5 Canvas来动态创建形状。

.arrow-wrap: {
  overflow: hidden;
  display: flex justify-content: center position: relative z-index: 10
}
.arrow: {
  width: 0 height: 0 border-style: solid border-width: 150px 100vw 0 100vw border-color: $dark transparent transparent transparent position: relative z-index: 1 display: flex justify-content: center
}
.arrow-text: {
  text-align: center margin-top: -130px white-space: nowrap position: relative z-index: 5
}
h1: {
  font-size: 50px margin: 0
}
p: {
  margin: 0 color: rgba($white, 0.8)
}
</style

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>

<body>
  <div class="arrow-wrap">
    <div>
      <div class="arrow-text">
        <h1 class="arrow">Services</h1>



        <p>Learn more about our services by selecting one below</p>
      </div>

    </div>
    <div class="arrow"><a href="#">My Service 1</a>
    </div>
    <div class="arrow"><a href="#">Service 2</a>
    </div>

  </div>
</body>

<script>
  var canv_active_id = 0;
  // find al elements of arrow class
  var x = document.getElementsByClassName("arrow");
  var i;
  for (i = 0; i < x.length; i++) {
    // create a canvas element with uniqueID
    var canv = document.createElement('canvas');
    canv.id = "canvas" + canv_active_id;
    canv.width = 21;
    canv.height = 24;
    canv.style.width = x[i].innerWidth * 0.05;
    canv.style.height = x[i].innerHeight * 0.55;

    //place the canvas element at the start of 
    //element
    var old_html = x[i].innerHTML;
    x[i].innerHTML = "";

    x[i].appendChild(canv);

    x[i].innerHTML += old_html;

    // get canvas context
    var ctx = document.getElementById("canvas" + canv_active_id).getContext('2d');
    // setup viewport
    ctx.scale(canv.style.width, x[i].innerHeight);

    ctx.save();
    ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -126.526770, -266.500710);


    // perform drawing by using lineTo()
    // #path4138
    ctx.beginPath();
    ctx.globalAlpha = 0.7;
    ctx.miterLimit = 8.19999981;
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgba(215, 238, 244, 0.7)';
    ctx.moveTo(126.526770, 266.500710);
    ctx.lineTo(137.339480, 271.799980);
    ctx.lineTo(148.152170, 277.099260);
    ctx.lineTo(137.408870, 284.043060);
    ctx.lineTo(126.665560, 290.986860);
    ctx.lineTo(126.596160, 278.743780);
    ctx.fill();
    ctx.restore();

    //increase unique ID
    canv_active_id++;
  }
</script>



</html>

如果你有很多形状，CANVAS可能是你想要的方式，那么它可能不会。您必须根据页面内容做出决定。

我应该使用CSS还是SVG来显示形状？

2 个答案:

CSS

SVG