热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

前端面试题(8)——SVG学习(1)

昨天某公司笔试题碰到这样一个问题分析以下代码:

昨天某公司笔试题碰到这样一个问题

分析以下代码:






hello welcome xian



以下代码说法正确的是(D)
A 代码会生成一个封闭的圆形文字环绕效果
B 文字添加了跳转链接,在原窗口跳转到百度页面
C 代码会生成一个半圆型状的开口向下的文字环绕效果
D 代码会生成一个半圆型状的开口向上的文字环绕效果

看到这道题我就麻了哈哈哈哈,svg这个标签我貌似都没接触到。

不过首先排除B选项,我没记错的话 target="_blank" 属性应该是打开一个新的窗口;然后我就不会了,随便懵了一个选项,

结束后,敲了一下这段代码,效果如下:



查缺补漏,以下是关于SVG标签的相关知识啦~

SVG 是使用 XML 来描述二维图形和绘图程序的语言。



  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  • SVG 用来定义用于网络的基于矢量的图形

  • SVG 使用 XML 格式定义图形

  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

  • SVG 是万维网联盟的标准

  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

与其他图像格式相比,使用 SVG 的优势在于:



  • SVG 可被非常多的工具读取和修改(比如记事本)

  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  • SVG 是可伸缩的

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  • SVG 可以与 Java 技术一起运行

  • SVG 是开放的标准

  • SVG 文件是纯粹的 XML



SVG 实例

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存:






实现效果:

代码解释:

第一行包含了 XML 声明。请注意 standalone 属性!该属性规定此 SVG 文件是否是“独立的”,或含有对外部文件的引用。standalOne="no" 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。 该 DTD 位于 W3C,含有所有允许的 SVG 元素。SVG 代码以 元素开始,包括开启标签 和关闭标签 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽,黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。关闭标签的作用是关闭 SVG 元素和文档本身。

注释:所有的开启标签必须有关闭标签!





推荐阅读
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • SVG 动态滤镜实现水面波动效果
    探讨如何使用SVG滤镜技术创建动态的水面波动效果,包括HTML、CSS和JavaScript代码示例。 ... [详细]
  • 本文介绍了一种使用CSS3和jQuery实现的35款SVG图标加载动画。这些动画不仅视觉效果出色,还能提升用户体验。通过本文,您可以了解如何在项目中应用这些动画。 ... [详细]
  • Leetcode学习成长记:天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ... [详细]
  • 在 CentOS 7 系统中安装 Scrapy 时遇到了一些挑战。尽管 Scrapy 在 Ubuntu 上安装简便,但在 CentOS 7 上需要额外的配置和步骤。本文总结了常见问题及其解决方案,帮助用户顺利安装并使用 Scrapy 进行网络爬虫开发。 ... [详细]
  • TypeScript ESLint: 避免使用隐式 any 类型,建议指定更具体的类型以提高代码可维护性
    在使用 Vue 引入 SVGSpriteLoader 时遇到了问题。具体表现为在 `shims-vue.d.ts` 文件中进行相关配置后,WebStorm 报错。为了解决这一问题,建议避免使用隐式 `any` 类型,而是指定更具体的类型,以提高代码的可维护性和类型安全性。可以通过在 ESLint 配置中禁用隐式 `any` 类型来实现这一目标。 ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • a16z深入解析:代币设计的常见误区、优化策略及未来趋势分析
    a16z深入解析:代币设计的常见误区、优化策略及未来趋势分析 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • Go 项目中数据库配置文件的优化与应用 ... [详细]
  • 在 Vue 3 项目中使用 ElementPlus 的 Icon 组件时,遇到了 SVG 图标无法正常显示的问题。经过查阅官方文档和 GitHub 讨论,最终发现是由于图标路径配置不正确导致的。通过调整图标路径和引入方式,成功解决了这一问题,并确保了图标能够正确加载和显示。此外,还对项目依赖进行了更新,以兼容最新的 ElementPlus 版本。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 深入RTOS实践,面对原子操作提问竟感困惑
    在实时操作系统(RTOS)的实践中,尽管已经积累了丰富的经验,但在面对原子操作的具体问题时,仍感到困惑。本文将深入探讨RTOS中的原子操作机制,分析其在多任务环境下的重要性和实现方式,并结合实际案例解析常见的问题及解决方案,帮助读者更好地理解和应用这一关键技术。 ... [详细]
  • 如何在服务器上正确连接显示器与键盘?一台主机是否能够支持双显示器及键盘配置?通常情况下,一台主机确实可以连接两个显示器和键盘,但需要使用适当的连接设备,如KVM切换器或分屏器。只要主机的硬件配置足够,这种多显示器配置是完全可行的。理论上,通过合适的设备,最多可以实现一拖五的配置。具体的技术参数和连接方法将在下文中详细说明。 ... [详细]
  • 在Vite项目优化过程中,通过使用rollup-plugin-visualizer插件,可以有效地对Rollup打包结果进行可视化分析,帮助开发者清晰地了解各个模块的占用情况,从而进行更有针对性的优化。此外,结合其他常用插件,如vite-plugin-compression和vite-plugin-inspect,可以进一步提升项目的性能和可维护性。 ... [详细]
author-avatar
我确实是一只猪_143_267
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有