花里胡哨的console.log
每个人都知道您可以使用它将console.log()文本和变量记录到控制台。您知道吗，您还可以在其中渲染（有限的）CSS、SVG，甚至 HTML？！？什么? 真的吗? 阿勇今天带你实现 控制台输入 各种各样的样式
让我们看看它是如何工作的。
以下是console.infoAdobe Photoshop 在线版本（部分未缩小）：这是它在 Chrome 和 Edge 中的样子（我使用深色模式）：
//代码演示见GitHub地址: https://github.com/AyongNice/consoleDelight
您可能已经猜到，%cs 对应于后面的字符串。每个元素都开始一个具有 的新元素display: inline。
SVG 呈现为data:image.
他是这样的效果如何实现呢?
//代码演示见GitHub地址: https://github.com/AyongNice/consoleDelight
%c有趣的是，图像的显示需要一个字符（如我在上面右侧添加的空格）。
SVG 功能
注意：SVG 有xmlns=”http://www.w3.org/2000/svg”一个属性很重要！如果没有，它就不会渲染，即使在支持 SVG 作为控制台背景图像的浏览器中也是如此。
探索控制台中非文本的功能
SVG 功能
注意：SVG 有xmlns=”http://www.w3.org/2000/svg”一个属性很重要！如果没有，它就不会渲染，即使在支持 SVG 作为控制台背景图像的浏览器中也是如此。
与 SVG 渐变、剪辑路径、蒙版、滤镜和图案相关
url() 我注意到在控制台中用作背景图像的 SVG 内部有一个限制 。这意味着我们 不能 做这样的事情，将单独的渐变应用于不同的 SVG 元素，并让它在控制台中工作：
<rect fill="url(#gradient1)" width="100" height="100" />
<rect fill="url(#gradient2)" width="100" height="100" />
直接通过 SVG 元素上的属性使用相同的属性也 不起作用
<rect fill="url(#gradient1)" width="100" height="100" />
<rect fill="url(#gradient1)" width="100" height="100" />
但是，如果您能够应用 url() via CSS 属性，则 可以 使用相同的渐变或其他属性。例如，这应该有效：
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1">
<stop class="stop1" offset="0%" stop-color="red" />
<stop class="stop2" offset="50%" stop-color="black" />
<stop class="stop3" offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<style>
rect {
fill: url(#gradient1);
}
</style>
<rect id="rect1" width="100" height="100" />
<rect id="rect2" width="100" height="100" x="120" />
</svg>
CSS 功能
JavaScript 功能
在 SVG 内渲染 HTML
您还可以在 SVG 内渲染 HTML，该 SVG 是控制台消息内的背景图像🤯。
但请注意，HTML 内容与 SVG 本身具有相同的限制，例如没有标签、没有事件侦听器等。
如果您想要包含列表之类的内容或使用相对定位，那么在 SVG 中使用 HTML 可能特别有用。
这可以实现的另一件事是 3D 变换！SVG 内容本身无法应用 3D 转换，但foreignObjectSVG 中的 HTML 可以！请注意，在控制台内部，内置深度排序似乎在 Chrome 中不起作用，因此我必须应用于z-index适当的侧面才能使此立方体可视化工作（另一种选择是仅使用边框，这样你就无法分辨深度排序已关闭）：
//代码演示见GitHub地址: https://github.com/AyongNice/consoleDelight未完!!!~~~待续
关于 在控制台如何使用 JS 功能我们下期文章讲解 关注阿勇 每天分享有趣的技术点
原文始发于微信公众号（阿勇学前端）：花里胡哨的console.log (上)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/248565.html
