let fragCode = [...document.scripts].find(s => s.type === "frag").textContent;
let fst = FullScreenTriangle(fragCode);
let resolution = fst.triangleProgram.uniform('2f', 'resolution');
let time = fst.triangleProgram.uniform('1f', 'time');
let eye = fst.triangleProgram.uniform('3f', 'eye');
let lightPos = fst.triangleProgram.uniform('3f', 'lightPos');
let started = new Date().getTime();
Mouse3D.init();
animate();
function animate() {
requestAnimationFrame(animate);
drawFrame();
}
function drawFrame() {
let t = (new Date().getTime() - started)/1000;
resolution.set(fst.gl.drawingBufferWidth, fst.gl.drawingBufferHeight);
time.set(t);
eye.set(Mouse3D.eye[0], Mouse3D.eye[1], Mouse3D.eye[2]);
lightPos.set(Math.cos(t/3)*0.8,0,Math.sin(t/3)*0.8);
fst.draw();
}
答案是不。因为这个问题太宽泛了。
如果作者问 - 是否可以在 SVG 上制作所有设计图形、动画、交互式制图？那么答案将是 - 是的！
因为 SVG 格式正是为此而设计的。网站上的图形应该是矢量，而不是光栅。我不想重复关于这个话题的陈词滥调——向量的重量更轻，这意味着网站飞得更快。根据定义，矢量是可扩展的，因此无需特殊技巧即可使网站在小型智能手机屏幕和巨型视频面板上看起来同样出色。
2021年2月26日，Scalable Vector Graphics SVG2正式版 发布
同时，SVG的可能性也大大扩展。特别是有一个新元素
Mesh gradients锥形渐变
SVG SMIL。四年来，他一直在
Chrome写 smil 被“弃用”——翻译过来的意思是他不赞成 smil，但每次都延长了对 smil 的支持。看，这已经从当前版本的 45 版到 78 版
Chrome，并且现在已经扩展到至少77更新 81的未来版本。正如他们所说，没有什么比暂时更永恒。为什么会出现这种情况，为什么smil没有关闭，近期也不会关闭？
因为主要竞争对手：CSS Animations Level 1， Web Animations 没有达到 smil SVG 的水平。
所有类型的，任何带有代码表的复杂 CSS 动画，都可以在 SVG 上用几行轻松简单地实现。另一方面，将一些 SVG 动画示例转换为 CSS 是根本不可能的。
例如：沿文本、对象、标记的弯曲路径移动。
另一个例子
使用贝塞尔曲线动画链接
将鼠标悬停在链接上时动画开始
例如：用于线条着色，svg 元素的颜色填充，添加到 css
stroke:#中，fill:#可以在 SVG 和 CSS 中使用的所有属性的列表
2018 年 10 月 20 日更新
链接到一个完全用 SVG 制作的网站：
viewBox对于SVG，如果您希望 svg 表现得像图像，则需要指定一个属性。否则 svg 将无法缩放。这有多大的问题取决于你。否则，现代浏览器已经支持 svg 很长时间了，您不必担心。第二个问题是 svg 比 png 更难制作。艺术家/设计师倾向于使用光栅图形：矢量 svg 比新方法更能有效地添加到网络中。
例如，它针对矢量图形进行了锐化
Flash，但现在不存在。如果该站点不是用于阅读，而是一个 Web 应用程序，例如用于绘图或播放，那么在我看来，它至少应该使用SVG来完成。
还有CANVAS，当SVG由于仍然是DOM元素而开始缓慢工作时，或者当SVG的功能不够用时（3D 图形），它可以提供帮助。
SVG 的优点：
所有这一切都源于 SVG 是一种具有相当简单语法的矢量格式，允许您轻松创建“复杂形状”元素。
易于交互——通过对 DOM 事件的支持，对 CSS 的支持，就像 HTML 元素一样。
用于处理滤镜、蒙版、动画的最丰富的内置功能。
SVG的缺点：
毕竟这是一个 DOM 结构，如果很大，那么渲染速度可能会下降。
不同的浏览器/设备支持不同的规范。
与HTML相比，很难输入纯文本，但没有人禁止为此使用纯HTML
示例，样条编辑器和对称性，请参阅扩展：
帆布的优点：
2D 和 3D 上下文的可用性。
图形编程几乎无限的可能性，这一切都取决于你是否能快速工作。
能够利用显卡的强大功能，不仅用于图形，还用于计算。
您将能够在（网络）编程中发现新的东西=）
画布的缺点：
相对复杂 (2D) 和非常复杂 (3D) API。（进入门槛高）
缺乏与元素交互的机制，即 您自己需要检查用户携带鼠标的位置并自己做出反应。
调试难度。（您在检查器中什么都不看，等等）
示例：3D 分形 - Menger Sponge，使用片段着色器中的光线追踪获得。
在示例中实现：
带有移动光源的 phong 照明/阴影
柔和的阴影
环境光遮蔽
控制：
拖动=旋转
滚动=缩放