当前位置: 首页 > 面试题库 >

SVG使用标签和ReactJS

阎建中
2023-03-14
问题内容

因此,通常包括我需要简单样式的大多数SVG图标,我这样做:

<svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

现在,我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分,但是我注意到,在其支持的标记/属性列表,无论是usexlink:href支持。

是否可以使用svg精灵并以这种方式在ReactJS中加载它们?


问题答案:

2018年9月更新
:不建议使用此解决方案,请阅读乔恩的答案。

-

反应并不支持所有的SVG标签就像你说的,有支持的标签的列表在这里。他们正在努力获得更广泛的支持,如票证中的
f.ex 所示。

常见的解决方法是为不支持的标签f.ex注入HTML:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}


 类似资料:
  • 问题内容: 如何使用JavaScript创建SVG元素?我尝试了这个: 但是,它将创建宽度为零,高度为零的SVG元素。 问题答案: 尝试这个 :

  • 下面是SVG的html,请帮助我为SVG创建XPATH

  • 本文向大家介绍Android中使用include标签和merge标签重复使用布局,包括了Android中使用include标签和merge标签重复使用布局的使用技巧和注意事项,需要的朋友参考一下 尽管Android提供了各种组件来实现小而可复用的交互元素,你也可能因为布局需要复用一个大组件。为了高效复用完整布局,你可以使用<include/>和<merge/>标签嵌入另一个布局到当前布局。所以当你

  • 一、简介 本章节主要介绍PHPCMS内置模块标签,标签说明及自定义调用数据的方式 二、目录 PC标签使用说明 PC标签保留参数 功能模块 工具箱

  • 标签(Tag),我们需要你!有时 Puppet 的一个类需要知道另一个类,或者至少要知道其是否已存在。 例如,一个管理防火墙的类或许需要知道一个节点是否是 web 服务器。 Puppet 的 tagged 函数会告诉你一个被命名的类或资源是否已经存在于这个节点的目录中。 你还可以对一个节点或类应用任何标签并检查这些标签是否存在。 操作步骤 为了帮你辨别你是否运行在一个指定的节点或一组节点,所有节点

  • 问题内容: 我有一个这样的测试用例: 由于某些原因,即使我在页面的源中查看时,水豚也找不到svg标签,但该标签在那里(并且在视觉上)。 在执行以下操作后,我才能够找到SVG标签: (请注意,svg在“图层” ID中)。 有人有什么想法吗?我使用Selenium作为驱动程序。 问题答案: 事实证明,这是Firefox内置的xpath评估程序存在的问题。 使用FireBug,我能够验证Selenium