首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当单击SVG时,MatFormField未被聚焦

是因为SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言,它不是一个表单字段,因此无法直接被聚焦。

MatFormField是Angular Material库中的一个组件,用于创建表单字段。它提供了一些样式和功能,使得表单字段的设计和交互更加方便。然而,SVG元素并不是一个MatFormField组件,因此无法直接与MatFormField进行交互。

要解决这个问题,可以考虑以下几种方法:

  1. 使用MatFormField包装SVG元素:将SVG元素放置在MatFormField组件内部,以便能够使用MatFormField的样式和功能。可以使用MatFormField的外观样式来使SVG元素看起来像一个表单字段,并使用MatFormField的聚焦事件来处理单击事件。
  2. 使用MatButton或MatIconModule代替SVG元素:如果单击SVG元素的目的是触发某个操作或导航到其他页面,可以考虑使用MatButton或MatIconModule来替代SVG元素。这些组件可以直接被聚焦,并且提供了丰富的交互功能。
  3. 自定义解决方案:如果以上方法无法满足需求,可以考虑自定义解决方案。可以通过编写自定义指令或组件来处理SVG元素的单击事件,并实现所需的聚焦行为。

总结起来,当单击SVG时,MatFormField未被聚焦是因为SVG不是一个MatFormField组件,无法直接与MatFormField进行交互。可以通过使用MatFormField包装SVG元素、使用MatButton或MatIconModule代替SVG元素,或者自定义解决方案来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

聚焦】大数据思维的十大原理:样本数量足够大,每个人都一样

数量的增长实现质变,就从照片变成了一部电影。...一个更深层的概念是人和人是一样的,如果是一个人特例出来,可能很有个性,但人口样本数量足够大,就会发现其实每个人都是一模一样的。 说明:用全数据样本思维方式思考问题,解决问题。...这种知识被证明是极具价值的:过去房屋巡视员出现场签发房屋腾空令的比例只有13%,在采用新办法之后,这个比例上升到了70%——效率大大提高了。   ...当然,如果一个人能及时穿过马路,那么他乱穿马路,车子就只需要稍稍减速就好。但是这些预测系统之所以能够成功,关键在于它们是建立在海量数据的基础之上的。   ...比如,监测数据显示,老人跌倒多数不是发生在雨天屋外,而是发生在家里,尤其是旱上刚起床和浴室里,这就提示,防控老人跌倒的对策应该着重在家居,起床要注意不要动作过猛,浴室要防滑,加扶手等等。

90970

VsCode中使用Jupyter

不信任笔记本,VS Code将不会渲染Markdown单元或在笔记本中显示代码单元的输出。相反,将仅显示Markdown和代码单元的来源。...如果不这样做,则在选择PDF选项将提示您安装它。另外,请注意,如果您的Notebook中只有SVG输出,它们将不会显示在PDF中。...要在PDF中包含SVG图形,请确保您的输出包含非SVG图像格式,否则您可以首先导出为HTML,然后使用浏览器另存为PDF。...在运行代码和单元格之后,单击顶部工具栏中的“变量”图标,您将看到当前变量的列表,当在代码中使用变量,这些列表将自动更新。...您还可以将图导出为PDF,SVG和PNG格式。 在“笔记本编辑器”窗口中,双击任何绘图以在查看器中将其打开,或选择绘图左上角的绘图查看器按钮(悬停可见)。

6K40
  • Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点

    一个元素使用display: none隐藏,它的所有后代都将被删除。...请参见下图: image.png 注意,蓝皮书被隐藏,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素。...下面是一个动画,演示移除书本发生的情况: image.png 如果资源隐藏在CSS中,它们会加载吗? 是的,会的。...当在父元素上使用visibility: hidden,所有内容都是隐藏的,但是该父元素的子元素具有visibility: visible,将显示该子元素。...我们需要解决两个问题: 1.菜单隐藏避免用键盘聚焦 2.导航隐藏,避免通过屏幕阅读器告知导航 下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。

    5K30

    【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例

    但是,存在 alt 属性值,它将如下所示: ? 这不是很好的反馈吗?另外,图片源发生故障,可以向其中添加伪元素。 1.4 响应式图片 ?...这样一来,可以使图像占据SVG的整个宽度和高度,而不会被拉伸或压缩。 宽度较大,它将填充其父级(SVG)宽度而不会拉伸。 ?...4.2.1 带有详细信息的Logo 一个LOGO有很多细节或形状,用内嵌式SVG可能没有那么多好处。我建议使用 ,图片类型可以是png、jpg 或 svg。 ?...但是,当用户上传半白色头像或非常浅的头像,此设计将失败。 ? 注意到上面的模拟图中,你要真的聚焦好了才知道里面有一个圆形。...输入被聚焦时会发生什么?让我们来探索一下。

    5.6K20

    微软VS Code已原生支持Jupyter笔记本,再也不用打开网页调试运行了

    如果看不到任何竖条,则表示该单元格未被选中。 当代码单元格处于命令模式,左侧的竖线为蓝色长条,表示已被选中。 ? 若处于编辑模式,则竖线将带有绿色斜线阴影。 ? 后面两种模式该如何切换?...还有一种更快速创建单元格的方法:处于命令模式,按下A将在所选单元格上方添加一个单元格,按下B将在所选单元格下方添加一个单元格。 写好代码后,点击单元格中的绿色箭头,运行结果将显示在下方。 ?...删除代码单元可以通过工具栏中的删除图标,或者选定的代码单元格处于命令模式下,按下dd来删除。 ?...在运行代码单元格之后,单击顶部工具栏中的“ 变量”图标,我们将看到当前变量的列表,当在代码中使用变量,这些列表将自动更新。 单击每个列标题可以对表中的变量进行排序。 ?...还可以将它们导出为PDF、SVG和PNG格式。 ? 调试 要调试Jupyter笔记本,需要先选择主工具栏中的“转换”按钮,将其导出为Python文件。 ? 点击后,将导出一个.py文件。

    5.4K40

    浏览器中实现JavaScript计时器的4种创新方式

    选项卡未聚焦不会暂停。 使用CSS动画处理时间事件(animationiteration) 如果创建带有无限动画的 div。...你可以订阅其 animationiteration 事件,并在事件 animation-duration 回调得到通知。 ? 优点 自动暂停,标签不在焦点。标签不在焦点上,事件根本不会触发。...使用SVG 标签(SMIL动画) ?...优点 即使 SVG 为 display: none;也会生效。 从 DOM 中删除 SVG 自动停止。 直到整页加载才开始渲染。 选项卡聚焦自动暂停。...标签未聚焦自动暂停。 缺点 仍然是一个建议。不要在生产中使用。 可怕的兼容性。可能仅适用于 Chromium。 还是有点违反直觉的。 标签未聚焦暂停。

    1.9K30

    D3库实践笔记之图表交互 |可视化系列36

    对于HTML元素来说,要响应用户的行为,可以在图形元素上添加一个或多个事件监听器,监测到对应行为时,执行某些响应代码。...在可视化绘制我们普遍用了var svg=d3.select("body").append("svg")或类似的代码,就可以使用以下代码给元素绑定事件监听器: var rect=svg.selectAll...常用的事件如下: •click:单击事件,鼠标单击某个元素触发,相当于mousedown和mouseup组合在一起;•dblclick:鼠标双击事件;•mouseover:鼠标的光标放在某元素上(悬停在元素上...);•mouseout:光标从某元素上移出来时;•mousedown:鼠标按钮被按下;•mouseup:鼠标按钮被松开; 以下代码为图表标题添加了一个单击事件的监听器,点击标题元素,会将标题加粗并在控制台输出当前标题文本...常用的触屏事件有以下三种: •touchstart:触摸点被放在触摸屏上,也就是触摸到某个元素;•touchmove:触摸点在触摸屏上移动;•touchend:触摸点从触摸屏上拿开; 我们可以为触摸事件配置点击事件以及拖动事件

    5.4K00

    23个高手都在用的Figma小技巧!(2022新专辑)-Part 01

    分享具体的文件位置:如果您选择了特定的页面、框架或元素,文件将在使用链接打开跳转到您的选择。这一点非常棒~ 002....006.添加左右约束的网格 您在将网格添加到框架(Frame)的同时设置约束,(非嵌套)项目会将列作为其父容器。如果您希望您的元素与网格完美结合,请将它们设置为left-right。 ‍...009.从浏览器复制可以编辑的SVG代码 您可以直接从页面的代码中复制 SVG,而不是下载 SVG 并将它们导入回 Figma 。选择 SVG 图像并右键单击以选择检查模式。再次单击图像源。...然后在图像视图中,再次右键单击检查模式,然后在整个 SVG 元素上,右键单击并选择“复制元素”。...你现在可以将它粘贴到你的 Figma 文件中,它仍然是一个可扩展和可编辑的SVG,它的所有图层都包含在内。 试试阿里巴巴图标库中的复制SVG功能,那个更方便。

    3.7K30

    CSS 下拉菜单与 focus

    在移动端上稍微有些不同,毕竟所有控制——无论单击、长按抑或划动——都由接触开始,也没有鼠标的「悬停」逻辑,为了方便判定,移动端上若想激活 :hover 也是单击(触摸)。...桌面端 移动端 focus 持续到失去焦点 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看,focus 是最合适的。...先说决定如何被聚焦,这里分为负值(一般是 -1)与非负值,若为负值则该元素 不可以被键盘 Tab 聚焦、但可以被 JavaScript 或者鼠标单击聚焦,一般希望被 JavaScript 接管的设为此值...其次,一个元素被聚焦,点击一般的空白处无法使它失焦。这个问题很迷,在 iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。...PC iOS Android focus 持续到失去焦点 默认不可用 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 按下进入,持续到失去焦点 active 单击按下期间

    5.5K20

    技术干货:前端图形化技术简介(上)

    Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 Canvas早在十几年前就被火狐浏览器引入。...前几年这种方式甚为流行,但是苦于兼容性的问题,未被大量推广。 SVG图像是一种矢量图,采用XML方式标记和绘制。由于SVG是一种ML,所以操作、调试都非常容易,并且可以直接交互。...所以当我们面临一个未知场景的时候,使用SVG或Canvas,或者是SVG+Canvas,需要谨慎权衡。 总体来讲,无论是Canvas还是SVG,不管间接或者直接,它们能做的事情都差不多。...交互系统应具备: · 事件系统(events|propagation) · 节点查询(query) · 动画系统(如果你有时间的话) Canvas的事件的发生位置映射到模型中...模型样式或者矩阵改变,应当全图重绘。不要妄想局部重绘,那种计算开销或者研发时间开销性价比太低。 2. 事件系统真的没有捷径,要认真对待。 3.

    1.6K70

    scetch入门 第2部分:文本,对齐和SVG在第3部分中了解如何导出文件

    点击这里直接下载SVG。(记得根据名词项目的指导方针在你的项目中给予肯定!) 下载并解压缩SVG文件后,将其直接拖到Sketch画板中。 ?...将SVG拖动到画板 选中图标后,让我们在屏幕左侧的“图层”菜单中进行一些调查。此SVG包含在名为“noun_59767_cc”的图层组中。...如果单击箭头将其展开,您将看到三个名为Layer_1,Layer_2和Layer_3的子图层以及一些用于艺术家信用的文本图层。 ?...您使用他人的作品,请确保在下载始终给予奖励或付费。 ? 打开图层 现在是时候做一些侦探工作了。我总是在导入矢量文件清理空的和不必要的图层。...创造袜子猴子风格 单击“创建新共享样式”并键入“Sock Monkey”。 ? 名字袜子猴子样式 这一次,我们将做一些不同的事情。暂缓将风格应用于第二只猴子。

    4.1K30

    Nodejs调用 SRFTAF 服务记录

    根据预估在网盘中存储的数据量进行购买,COS 资源包可以叠加,因此您可以先购买一个较小规格的资源包,需要再叠加购买用以抵扣更多的标准存储容量 有效时长 根据需求进行选择,如果考虑后续购买更大资源包...配置 MySQL 1.打开并登录 MySQL 控制台,选择先前购买 MySQL 选择的地域,并选择所购的 MySQL 示例,单击更多操作中的初始化,根据下表说明进行配置: 配置项 值 支持字符集...2.执行下述命令安装 Nginx: yum install nginx 提示以下信息,按 Y 并回车确认安装(下同)。...Is this ok [y/d/N]: 3.出现以下信息,表示安装完成。 Complete!...root 密码 数据库名 nextcloud(或其他未被使用的数据库名) 数据库主机(默认显示为 localhost) 云数据库 MySQL 的内网地址 3.单击安装完成

    2.8K60

    PowerToys 0.21.1汉化版,免费给 Win10 加装各种增强新功能的效率利器

    要启用它,只需单击功能区中的"查看"选项卡,然后单击"预览窗格"。...PowerToys 现在可预览两种类型的文件:标记 (.md) 和 SVG (.svg) 图像处理器 映像调整器是Windows 外壳扩展,用于快速调整映像大小。...只需从文件资源管理器中右键单击,即可立即调整一个或多个图像的大小。此代码基于布里斯·兰姆森的图像处理器。...PowerToys Run 应用启动器 PowerToys Run 是一款快速启动器工具,类似于 Mac 系统自带的 Spotlight (聚焦搜索) 以及 Windows 上的 Listary、Wox...软件预设了 大 / 中 / 小 / 手机 等不同的常用模版,单击确定即可一键完成图片尺寸的批量调整。

    2.4K10

    基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用

    浏览器访问 http://localhost:4000/api ,下面的代码片段会返回一个 JSON 对象//index.jsconst express = require("express");const...接下来,让我们添加一些额外的功能,例如通过单击按钮复制所有 Typescript 代码以及通过单击按钮清除输入编辑器的所有内容的能力。...复制 Typescript 代码================在这里,你将学习如何使用 React-copy-to-clipboard 库在单击按钮复制和粘贴内容我们已经在本教程开头安装了该包。...一个在复制内容成功后运行的函数)删除用户输入======如果要删除所有用户的输入,需要将 value 作为 prop 传递到 组件中当用户单击删除图标更新...default Delete;总结==到目前为止,我们已经学习了ChatGPT 是什么如何在 React 应用程序中添加高效的代码编辑器如何在 Node.js 中与 ChatGPT 通信如何在 React 中单击按钮复制与删除内容本教程完成一个可以使用

    30710

    Sketch63版本来啦!更新内容抢先看!

    但是静电尝试使用的时候,出现了这个,很尴尬了。 ? 其它更新内容 001.添加了Facebook封面图片的预置画板尺寸,静电发现还有不少社交媒体的尺寸可供选择,虽然用到的很少。 ?...Bug修正 001.在“文档”窗口的“最近”视图中右键单击,不会显示清除视图的选项。 002.修复了关闭未保存的文档窗口并将其保存到Cloud也会意外地创建该文档的本地副本的错误。...010.修复了一个错误,即您应用某些“文字样式”替代项,具有“智能布局”设置的Symbol实例的大小不会总是按预期进行调整。...011.修复了将SVG从Web浏览器直接拖动到工作区上SVG无法按预期导入的问题。 012.修复了以下问题:在按住Command键的同时单击以在弯曲路径后插入新点会插入新的弯曲点而不是笔直的点。...013.修复了一个错误,如果您单击任何“Sketch”窗口中的标题栏,将导致弹出窗口关闭。

    1.7K40
    领券