如何使用 Javascript 内联 Svg 更改样式

已发表: 2023-02-06

如果您希望使用 JavaScript 更改内联 SVG 的样式，则需要牢记一些事项。内联 SVG 就像任何其他 HTML 元素一样，因此您可以使用 CSS 选择器定位它们。但是，因为它们是内联的，所以与常规 HTML 元素相比，它们的样式可能更棘手。为了更改内联 SVG 的样式，您需要使用 CSS 属性“fill”。 fill 属性用于设置 SVG 的颜色。您可以将 fill 属性设置为您想要的任何颜色，但请记住，它必须是有效的 CSS 颜色。您还可以将填充属性设置为图像，这是创建一些有趣效果的好方法。请记住， fill 属性仅适用于内联 SVG，因此如果您尝试使用SVG 背景设置常规 HTML 元素的样式，它将不起作用。下面是一个如何使用 JavaScript 更改内联 SVG 颜色的示例：var svg = document.querySelector('#my-svg'); svg.style.fill = '红色'; 您还可以使用 CSS 属性“stroke”来更改内联 SVG 的笔触颜色。 stroke 属性用于设置 SVG 周围线条的颜色。下面是一个示例，说明如何使用 JavaScript 更改内联 SVG 的笔触：var svg = document.querySelector('#my-svg'); svg.style.stroke = '红色'; 您还可以使用 CSS 属性“opacity”使内联 SVG 透明。 opacity 属性用于设置元素的透明度。该值可以是 0 到 1 之间的任何值，0 表示完全透明，1 表示完全不透明。这是一个如何使用 JavaScript 使内联 SVG 透明的示例：var svg = document.querySelector('#my-svg'); svg.style.opacity = 0.5;

除了 HTML 之外，HTML 和 SVG 也使用文档对象模型 (DOM) 表示。因此，可以使用 Javascript 快速轻松地操作它们。在本课中，我将介绍如何使用内联和外部 SVG。如需完整的代码示例列表，请转到本页顶部。当将元素添加到 URL 本身时，可以使用相同的代码为外部 SVG 指定元素。因为 SVG 无法访问页面中嵌入的 HTML 文档，所以我们也可以这样做，因为页面上的其他 SVG 无法查看它。如果将代码包装在 CDATA 中，则 XML 解析会考虑 XML 文件的 JS 代码部分。

元素的创建和删除方式与它们在 HTML 中的方式相同。为了创建元素，您必须首先将标签名称和相关文档的 createElementNS() 方法传递到 SVG 命名空间中。您必须首先使用 createTextNode 方法创建一个单独的文本节点，然后再将其附加到文本元素以删除元素。它们不存在于同一个文档中，因此它们可以一起工作。

下面的步骤将带您了解如何使用内联SVG 图像。要将 SVG 图像直接写入 HTML，请使用 *svg 标签。打开 VS 代码或您喜欢的 IDE 并插入 SVG 图像，复制代码并将其粘贴到 HTML 文档的 body 元素中。

无法以这种方式更改图像的颜色。当您将 SVG 作为图像加载时，您只能使用浏览器中的 CSS 或 Javascript 更改它的显示方式。要更改图像，请在加载图像时内联使用 *object、*iframe 或 *svg。

使用 style> 元素时，样式可以直接嵌入到 SVG 内容中。您必须了解 SVG 的样式元素与 HTML 的样式元素具有相同的属性（有关更多信息，请参阅 HTML 的样式元素）。

如果您不需要在单个页面上显示数千个图标，请使用内联SVG 图标。您不介意您的文件比平常大，并且页面不保存在缓存中（或根本不保存）。

Javascript 可以应用于 Svg 吗？

因为它们可以内联在 HTML 中，所以我们可以使用 JavaScript 来操作它们。要使用，我们可以为图像的一部分制作动画，使其具有交互性，或者通过使用代码将其变成可交互的东西。

DRY 代码使您的代码更健壮，更不容易输入，并且运行起来更有效。使用全局事件对象是 Internet Explorer 的遗留问题；没有用。当您将数据对象传递给事件处理程序时，它将使用您传递的事件对象。修改 x 和 y 变量时无需重新表征它们。如果您想在所有浏览器中使用它，我会提供我提供的 ASCII 事件代码而不是 keydown，并且您需要使用您提供的奇数。代码使用 addEventListner() 来附加事件处理程序，而不是使用 onfoo=”…” 属性来描述当元素上发生事件时应该发生什么。只有在加载页面后，外部函数才会开始，以便引用元素。

如何在 Svgs 中使用 Javascript

我们可以使用 javascript insvg 吗？
An.VSW 文档可以用 JavaScript 分层，可以在文档打开和关闭之间的任何位置添加。脚本应该放在文档的末尾，以防止它阻塞并允许它充分利用 DOM。
Issvg Javascript 依赖？
可以缩放基于矢量的 XML 格式的图像而不会降低其质量。 CSS 和/或 JavaScript 是用于动画和操作 SVG 的优秀工具。因为它是响应式的，与 JPG、JPEG、PNG 和其他文件格式相反，SVG 还减少了页面加载时间（从而降低了页面加载速度）。
为什么 HTML 不接受 svg？
使用 svg>/svg> 标签时，可以直接将图像写入 HTML 文档。您可以通过在 VS 代码或您喜欢的 IDE 中打开 SVG 图像、复制代码并将其粘贴到 HTML 文档中的 body 元素来执行此操作。如果其他一切都按计划进行，您应该会得到一个与下图完全一样的网页。
什么是 svg 文件的最佳软件？
Chrome、Firefox、IE 和所有其他流行的浏览器都可以渲染 SVG 图像。基本文本编辑器和高端图形编辑器，如 CorelDRAW，也支持 SVG 文件。

你能用 Css 设计 Svg 样式吗？

在样式表和表示属性中使用 CSS 是将SVG 属性定义为表示属性或样式表的一个进步。这也可以通过 CSS 伪类来完成，例如 :hover 或 :active。此外，SVG 2 引入了一组可用于显示的新样式属性。

使用 >use> 元素即时访问图标或任何其他SVG 元素或图像可能是一个挑战。它旨在提供一些实用方法的概述，以克服 >use> 属性中固有的样式限制。 SVG 中定义、结构和引用代码的四大元素是元素。创建模板时，使用通过标识符类型定义元素是有利的。 symbol 元素用于组织定义模板的元素，该模板将在文档的其他地方引用。 use 元素允许您重用现有元素，它提供与图形编辑器相同的复制粘贴功能。什么是影子 DOM？

你真的能从他们的工作中看到文件吗？在这种情况下，元素中存在自身的克隆。使用 Chrome 网上应用店上的开发人员工具预览影子 DOM 的内容。为此，请打开“设置”面板并选择“常规”选项卡，然后选择“Shadow DOM 检查”并单击“齿轮”图标。另一方面，影子 DOM 在处理文档中的 CSS 和 JavaScript 时具有一些明显的特征，但它与常规 DOM 并不完全相同。这条路径的后代将不可能成为目标。在这种情况下，这是因为我们无法使用常规 CSS 选择器访问影子 DOM。

表示属性是可以在元素上指定的 CSS 属性。它们在自然环境中形成了一系列风格，但可能并不像预期的那样。 presentation 属性是受任何其他样式定义约束的低级属性表。样式级联中没有强大的表示属性，继承的样式也被排除在外。 use 元素中的样式和元素的样式都将传递给每个后代。任何其他样式声明都可以覆盖表示属性。外部样式声明是强制覆盖表示属性的绝佳方式。

这可以使用 CSS inherit 关键字在几分钟内完成。在下面的示例中，我们将使用可以更改填充颜色的路径，以匹配我们想要为不同目的显示的冰淇淋类型。 CSS all Property 内容的使用并不常见，但它可能非常有益。该声明几乎肯定会从其祖先那里继承所有元素的属性值。这几乎可以在支持所有属性条目的任何浏览器中完成（有关具体信息，请参阅详细信息）。我们可以通过使用 CSS currentColor 变量而不是简单地使用一个来改变元素的颜色。为此，我们同时使用容器的填充和颜色属性，然后使用 currentColor 的可变特性将这些颜色层叠到容器的内容中。

我们将使用 currentColor 变量来确保前面的每一滴都被赋予一个特定的颜色值：由 color 属性指定的值。该技术在使用简单的双色徽标时最有用。 Amelia Bellamy-Royds 一年前在 Codepen 博客文章中提出了这个概念。使用 CSS 变量时，您可以为 <use> 的内容设置样式，而不必强制浏览器覆盖任何表示属性值。变量是指描述网页中特定于特定文档的元素的实体，例如作者和用户。 CSS 变量与 CSS 预处理器变量（如 Sass）有许多相似之处，但它们更灵活，可以执行以前为预处理器变量保留的各种功能。您可以拥有任意数量的副本，并选择一组颜色用于每次使用，从而产生各种主题。

如果您想根据上下文或用例以任何方式更改徽标的样式，这将特别有用。不需要将这些变量包含在填充和颜色中，但您可能不需要或不应该这样做。如果变量无法加载其定义的值，浏览器将恢复为标记中定义的颜色。在 CSS 中为每个新实例设置一组变量值，您将拥有不同的颜色主题。使用 CSS 级联可以帮助简化内容的样式有了 CSS 变量，我们可以通过打破影子 DOM 的线条来根据自己的喜好调整图形。它们目前仅受 Firefox 支持，但如果您希望它们更加突出，您也可以在其他浏览器中为它们投票。未来还可能包括使用 CSS 变量作为 SVG 参数，因为关于如何使用 CSS 变量设置内容样式的讨论正在进行中。

fill 属性不能单独用于指定 sva 图形中的颜色。 color 属性也可以用来表示 SVG 标签的颜色。整个图形将设置为此颜色，包括图形中的任何文本。要指定颜色，您还可以使用 currentColor 关键字。要确定图形的颜色，请选择文档中当前使用的颜色。在处理图形时，您可以使用此方法使图形看起来保持一致。完成图形颜色设置后，您可以随时使用 CSS 更改它。通过选择此选项，可以轻松更改文档中共享SVG 图形作为父元素的元素的颜色。

为什么不能在浏览器中更改 Svg 图像的颜色

借助图像生成器，您可以轻松创建控制图像外观的矢量图形。但是，如果您想更改图像在浏览器中的显示方式，则必须使用不同的文件格式。无法使用 CSS 或 Javascript 更改 SVG 在浏览器中的显示方式。要更改您的 SVG 图像，您必须使用其 [[object][iframe])、[[iframe[/iframe]] 或 [[svg]] 内嵌加载它。
在更改 SVG 图像的颜色之前从文件中删除任何其他填充属性。关键字 currentColor 表示正在使用的颜色（不是固定颜色）。之后，您可以使用 CSS 通过设置元素的颜色属性或元素的父属性来更改颜色。

HTML 到 Svg Javascript

有很多方法可以将 HTML 转换为 SVG。一种方法是使用像 D3.js 这样的库。另一种方法是使用像 Adobe Illustrator 这样的工具。

这。 svg 文件格式允许更动态地缩放图像和数据。 XML 标记描述了这些是如何绘制和对齐的，尤其是路径。当您将标记插入 HTML 文件时，它将显示在用户的实际图标中。此外，通过在呈现数据时从远程位置将 SVG 图标动态插入到数据中，可以使用动态插入的 SVG 图标动态生成数据。可以创建 XML 标记，也可以在 html 元素中创建和显示它。要在 main.js 文件中生成 XML，请创建一个函数。一旦我们上传图片，我们就会将它插入到锚标记中，从而使我们的滚动功能起作用。

因此，现在可以像处理任何其他元素一样处理 svg。样式、类和属性都可以进行编辑，并且它们都可以发挥作用。这些图标是预先添加的，因此它们可以很容易地用作锚链接以实现平滑滚动。

Svg Javascript 示例

将 JavaScript 与 SVG 结合使用可为您提供更多选择和灵活性。您可以使用 JavaScript 来创建特殊效果、提高性能和验证表单。您还可以使用 JavaScript 来控制 SVG 内容本身，例如显示和隐藏元素以及动画元素。

该图形工具采用了一种称为可缩放矢量图形 (SVG) 的技术。可扩展标记语言 (XML) 是一种允许创建基于矢量的图形的图像格式，是基于矢量的图形的独特格式。在 CSS 和 HTML 中使用 SVG 图像与直接使用它不同。在本教程中，我们将介绍六种不同的方法。本课将向您展示如何使用 sva 文件作为 CSS 背景图像。 'img' 标签用于以这种方式将图像添加到 HTML 文档。这一次，我们使用 CSS 来做，而不是 HTML，而且有更多的选择。

HTML 允许使用 HTML >object 元素将图像添加到网页。所有支持可缩放矢量图形 (SVG) 的浏览器都支持它。 HTML >embed> 元素可用于通过以下语法将图像添加到 HTML 和 CSS：>embed src=happy.svg。 MDN 建议只使用 >embed > 因为大多数现代浏览器不再支持插件。

为什么在 Javascript 中使用 Svg？

我如何在 JavaScript 中使用 svg？
因为图像的每个组件都可以使用 CSS 设置样式或使用 JavaScript 编写脚本，所以将它们用于样式/脚本是有意义的。
通过使用 svg> 标签，您可以将 SVG 图像嵌入到您的网页中。要使网页看起来像下面的演示，请复制代码，将其粘贴到 HTML 文档的 body 标记中，它就会显示出来。

使用 Javascript 选择 Svg 元素

要使用 JavaScript 选择SVG 元素，您可以使用 querySelector() 或 querySelectorAll() 方法。这些方法在文档和所有元素上都可用，并且它们接受 CSS 选择器作为它们的参数。

在 CodePen 中，基本 HTML5 模板中的每个元素都包含在 HTML 编辑器的 body 标签中。如果您愿意，可以在此处添加可能影响整个文档的类。 CSS 可以与您选择在 Internet 上使用的任何样式表一起应用于您的 Pen。您可以从互联网上的任何地方向您的 Pen 添加脚本。只需在此处的 URL 字段中输入一个 URL，我们将按照您之前为 Pen 编写的 JavaScript 的顺序添加它。如果脚本具有与预处理器相关的文件扩展名，我们将在应用前尝试处理脚本。

Svg：网络图形的未来

请输入 svg 名称。还有一些与高度和宽度相关的物理属性。本地名称='svg' br>。

如何使用 Javascript 在 Svg 中添加图像

为了使用 javascript 在 svg 中添加图像，必须首先创建一个新的 Image 元素，然后将其 src 属性设置为图像的路径。加载图像后，可以将其附加到 svg。

我们需要一个 patio11 头像来制作一个 patio11bot。当浏览器查看 SVG 时，它会生成一个显示在屏幕上的图像。在 SVG 文件本身中，我包含了一个 openMouth 元素和一个嘴巴组件。如果我在两者之间切换可见性，看起来他只是在做他自己。我们将把 patio11bot talk.svg 放入一个带有我们将制作的对象标签的 HTML 文件中。到目前为止，我们可以详细了解 SVG 元素。但是，您还可以使用另一种技巧通过 JavaScript 选择它们。使用 contentDocument，我们可以检索该对象的文档。使用这个是我们获得张嘴张嘴所需参考资料的最佳方式。

Javascript 从文件加载 Svg

假设你想从本地文件系统加载一个 SVG 文件并将其解析为 XML 文档，你可以使用以下代码：
var fs = require('fs'),
parseString = require('xml2js').parseString;
fs.readFile('file.svg', function(err, data) {
parseString（数据，函数（错误，结果）{
控制台目录（结果）；
});
});

是否可以在 Javascript 中使用可缩放矢量图形 (svg)？

我如何在 javascript 中使用 svg？
事实上，SVG 图像的样式和脚本化表达可以在 JavaScript 中以与任何其他 DOM 元素相同的方式完成。
如何在 HTML 中插入外部 SVG？
可以使用 *svg 标签将外部 SVG 嵌入到 HTML 中。复制并粘贴代码后，将代码复制并粘贴到 HTML 文档的 body 元素中。如果一切正确，您应该会看到一个与下图完全一样的页面。
在 C# 中获取 SVG 的最佳方式是什么？
要获取 SVG，请使用对象元素的 contentDocument 属性。当您导航到该文档时，您会找到包含 svg> 元素父名称的文档对象。应该使用文档对象的 documentElement 属性来获取文档的根元素，即 svg。

在 Javascript 中动态创建 Svg 图像

可以使用 javascript 动态创建 svg 图像。这可以通过创建一个新的 svg 元素并设置其属性来完成。

在本教程中，我们将讨论动态 SVG 元素。根据 MDN 文档，http://www.w3.org/2000/svg 是该文件的语法。我们正在创建的元素——矩形、文本、圆等等——必须有一个限定名称。可选的选项参数对我们来说不是问题。我被它附带的大量属性、CSS 和内联样式弄得不知所措。我们可以使用 GreenSock 工具来定义属性或内联样式。 CSS 经常用于现代浏览器中的 cy、cy、r 等属性。

作为一般规则，尽可能多地使用 CSS 属性（样式表或内联样式）。在本文中，我将使用 HTML、CSS 和一些表示属性来构建动态元素。我们将使用的变量决定了 sva 中需要多少个矩形、宽度和高度。在发布新的几何属性之前，我不会深入探讨它们；但是，它们将包含在下一个版本的软件中，称为 SVG2。当这些元素在运动时，我们可以看到它们是如何相互作用的。使用 clip-path 工具，我们可以将动态元素添加到 SVG 的根目录中。在此演示中，我们将创建基色圆圈的描边版本并将它们包含在一个组中，以便可以单击它们。

每个裁剪矩形都从其 y%:100 级别补间，以便它位于裁剪圆下方。当播放头反转时，它将保持中立。因为我们在补间开始时单击，所以在开始时单击之前什么都没有。然后我们将该补间插入到我们的动画数组中。它由一个带内环和外环的波浪形数字表组成。内循环和外循环都使用 makeLine() 函数创建五条垂直线，外循环使用 makeNumber() 函数在较高的刻度线上方生成一个数字。您可以使用矢量软件快速调整内容，而不是返回绘图板。

Svgsvgelement.getproperty() 方法

使用 SVGSVGElement.getProperty() 方法时，您可以在 svg> 元素上指定属性。您可以在 SVGSVGElement.getProperty('fill') 方法中通过选择具有填充颜色的元素或属性来获取填充颜色的值。

Svg 到 Javascript 转换器

有很多方法可以将 SVG 转换为 JS。一种方法是使用像 D3.js 这样的库。该库有一个名为“selectAll”的内置方法，可用于选择 SVG 中的每个元素。选择每个元素后，您可以使用“attr”函数为每个元素添加 JS 属性。

我如何获得形状的坐标？我的 SVG 文件当前显示此形状作为源。可能只需将其拖动到 GeoJSON 编辑器中就足够了。可以在此链接中找到更多信息。 Highcharts 在 http://www.highcharts.com/mapdata/custom/world.js 上有一个 World.js 的地图数据页面。因为高图直接读取的是GeoJSON，所以不需要转换。编辑工具简单易懂。如果您需要更多信息，请参阅 QGIS 文档。如果您对添加的功能（以及所做的任何编辑）感到满意，则需要将图层导出到 GeoJSON。