我应该使用CSS或SVG来显示形状吗

我一直在使用 CSS 在我的网站上玩形状,它已经好了,但在操纵它们时有点恼人,因为例如一个三角形,它实际上是一个带有边框的矩形。

我一直在使用 CSS 在我的网站上玩形状,它已经好了,但在操纵它们时有点恼人,因为例如一个三角形,它实际上是一个带有边框的矩形。

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

我想使用 CSS,因为它会比使用图像加载得更快。

几天过去了,我偶然发现了 SVG,我一直在网上看到它们,但从未深入研究过它们。所以,我想知道,使用 SVG 而不是这些 CSS“hacks”来实现我的形状会更简单吗?找不到关于这个特定主题的任何真实信息,所以任何关于 SVG 的信息都值得赞赏。(这些形状将是 1000px + 宽,因此我没有使用...)

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

对不起,下面是我目前使用的代码来实现效果,以及我想要实现的图像(不幸的是,设计图像的人没有为设计提供代码,只有图像)。

源图像

Image of design hoping to achieve

我的代码(对不起,如果您不喜欢 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)

My outcome image Image of my design prototype

所以,因为我不得不把周围的文字工作(缩放仍然不完美),我想知道是否走 SVG 的路线将是这样的,那就是如果 SVG 的更有效的在完成工作 / 加载时间。

也只是在想-在顶部增加更多的空间-添加一个实心框阴影,以产生一种不规则的五边形Found on YouTube here

enter image description here

7

两者都用。

CSS公司

将 CSS 用于基本形状。基本动画。就像您在使用 CSS 生成自定义形状时提到的那样,您所做的只是添加框阴影的边框以创建所需形状的错觉。有人可能会说这不是将来的证明,并且可能会在任何更新时中断。

SVG

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

SVG 可以通过操纵 svg 本身的样式进行动画处理,但是这(取决于你的目标是什么)可以成为一个非常深的兔子洞。我对 SVG 动画的建议是使用 javascript 库。

我的建议是使用两者。先感受一下 CSS。对我来说,如果你想要快速的东西,似乎路线不那么受阻,最容易学习。也可以尝试 SVG 我过去使用 SVG 库创建了一些很棒的效果,单独使用 CSS 是不可能的,它们甚至可以在 IE9 中工作 (不再支持它)。

太长,读不下去了

将 CSS 用于基本形状和动画

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

4

所以要回答原来的问题:

如果您正在考虑将数据从 http 服务器传输到连接客户端的时间,则 CSS 显示形状的速度要快得多,只要形状是没有动画且不包含自定义曲率或路径或多个图层的简单图形。

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

基本上有两种方法来呈现更复杂的动画和绘图(我的意思是复杂的,如在网页上的俄罗斯方块游戏或东西)

您可以使用 SVG 或 CANVAS。(还有其他第三方插件,如 shockwave / flash 等)

但基本上,Canvas 是更容易使用的替代 SVG 的一个原因:它的 javascript 友好。

您还可以使用 Javascript 绘制 SVG 内联元素,但如果没有像 SVG.JS 或 SWAP.JS 这样的附加 JavaScript 库,它就不那么简单了

另一方面,SVG 比 canvas 更容易缩放到不同的大小。您可以简单地更改 SVG 元素的视口,并实现已缩放的图像。HTML5 canvas 可以更加 frutstrating 缩放到正确的大小。

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 可能是要走的路,那么它可能不会。你必须根据页面的内容做出决定。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(38)
CSS阴影框::后 arrox与边框方法
上一篇
检测GoogleChrome翻译
下一篇

相关推荐

  • 仅CSS动画-如何填充svg心脏图标

    (W3 验证器的解决方案清洁可以在本文的底部找到)…

    2022-11-11 15:13:39
    0 20 67
  • java实现websocket:如何使用Java实现Websocket通信

    示例示例Java实现的步骤如下:在服务器端创建一个对象,监听指定的端口,等待客户端连接。…

    2023-01-17 13:12:07
    0 57 62
  • windows11只有一个c盘怎么分盘:如何在Windows 11中有效地分割C盘

    Windows 11只有一个C盘分盘的方法如下:打开“计算机”,右键单击C盘,选择“管理”;…

    2023-01-01 05:54:14
    0 53 74
  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 15 44
  • python random.sample函数:Exploring the Magic of Random Sampling

    random.sample函数是Python random模块中的一个函数,用于从指定的序列中随机获取指定长度的片断。该函数不会修改原有序列。…

    2023-01-02 03:16:46
    0 81 41
  • canvas 滚动:Unlock the Power of Canvas Scrolling to Transform Your

    Canvas滚动是指在Canvas画布上实现滚动效果的一种技术。它可以通过改变画布的位置来实现滚动,也可以通过改变画布的大小来实现滚动。…

    2023-01-03 01:47:42
    0 94 80
  • android 视频编码深入理解MediaCodec API

    Android 视频编码是指将原始视频数据经过压缩编码后,生成新的视频数据,以便减少视频文件的体积,提高传输速度,以及更好地在 Android 设备上播放。…

    2023-01-07 02:13:42
    0 90 91
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 87 96

发表评论

登录 后才能评论

评论列表(24条)