繁体 English 中英

如何使用jQuery访问SVG中的图像元素

[英]How to access image elements inside an SVG with jQuery

原文 2018-02-13 08:05:09 3 0 jquery/ dom/ svg

我有一个SVG文件，其中包含我想使用jQuery处理的元素。 这可能吗？ 我可以访问SVG标签，但是不能访问其中的元素。

<svg id="Layer_1" data-name="Layer 1" style="max-height:400px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 485 480">
<image width="678" height="678" transform="translate(-94 -100)" id="section1" class="lime" xlink:href="data:image/png;base64,......">
</svg>

我希望能够访问＃section1或.lime ，但是目前只能访问Layer_1 。 在代码的后面，有一个click函数，它可以更改选项卡的内容，并且如果我将trigger元素更改为Layer_1时 ，该函数就可以工作

额外的问题-是否有办法为Base64映像提取数据，因为这会使代码更加整洁？

谢谢！

0 个解决方案

如何使用jquery动态将元素添加到SVG图像？

[英]How to dynamically add elements to an SVG image with jquery?

如何访问jQuery选项卡中的元素

[英]How to access elements inside jQuery tab

Jquery 选择一个 SVG 元素<object>标签<div id="text_translate"><p>我有一个 SVG，它有一些 linearGradient 元素，这些元素在单击按钮时发生变化一切正常，如您<a href="https://jsfiddle.net/ionut1234/8pgf3s6j/5/" rel="nofollow noreferrer">在此处所见</a>。我的问题是，如果我示例中的 svg 是外部文件并在<object>标记中调用，怎么能做同样的事情？</p><p> 我的 SVG：</p><pre> <object data="Img/PumpStation/Pump.svg" type="image/svg+xml" id="alphasvg1111"></object></pre><p> 我的按钮：</p><pre> <asp:Button ID="Button1" class="test" runat="server" Text="Button" /></pre><p> 我的 jQuery 函数：</p><pre> jQuery('.test').on('click', function () { //$("object").contents().find("path").attr({ "fill": "red" }); jQuery('object stop').each(function () { var color = jQuery(this).css('stop-color'); if (color === 'rgb(77, 77, 77)') { jQuery(this).css('stop-color', '#ff0000'); } }); });</pre><p> 如果我使用： $("object").contents().find("path").attr({ "fill": "red" }); ，单击按钮时我的 SVG 变为红色。为什么其余功能不起作用？</p></div></object>

[英]Jquery select SVG elements inside an <object> tag

使用jQuery在SVG中选择图像

[英]Select image inside svg using jquery

如何创建一个带有css动画元素的jquery图像滑块？

[英]How to create a jquery image slider with css animated elements inside?

如何使用jQuery / Javascript缩放单个SVG元素？

[英]How to scale individual SVG elements with jQuery/Javascript?

如何使用jQuery更改SVG元素属性？

[英]How to change SVG elements attributes using jQuery?

如何使用jQuery / Javascript旋转单个SVG元素？

[英]How to rotate individual SVG elements with jQuery/Javascript?

jQuery选择里面的SVG锚元素<object>标签

[英]jQuery select SVG anchor elements inside <object> tag

jQuery获取SVG中具有指定ID的所有元素

[英]jQuery get all elements inside SVG with ID specified

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jquery动态将元素添加到SVG图像？如何访问jQuery选项卡中的元素 Jquery 选择一个 SVG 元素<object>标签<div id="text_translate"><p>我有一个 SVG，它有一些 linearGradient 元素，这些元素在单击按钮时发生变化一切正常，如您<a href="https://jsfiddle.net/ionut1234/8pgf3s6j/5/" rel="nofollow noreferrer">在此处所见</a>。我的问题是，如果我示例中的 svg 是外部文件并在<object>标记中调用，怎么能做同样的事情？</p><p> 我的 SVG：</p><pre> <object data="Img/PumpStation/Pump.svg" type="image/svg+xml" id="alphasvg1111"></object></pre><p> 我的按钮：</p><pre> <asp:Button ID="Button1" class="test" runat="server" Text="Button" /></pre><p> 我的 jQuery 函数：</p><pre> jQuery('.test').on('click', function () { //$("object").contents().find("path").attr({ "fill": "red" }); jQuery('object stop').each(function () { var color = jQuery(this).css('stop-color'); if (color === 'rgb(77, 77, 77)') { jQuery(this).css('stop-color', '#ff0000'); } }); });</pre><p> 如果我使用： $("object").contents().find("path").attr({ "fill": "red" }); ，单击按钮时我的 SVG 变为红色。为什么其余功能不起作用？</p></div></object> 使用jQuery在SVG中选择图像如何创建一个带有css动画元素的jquery图像滑块？如何使用jQuery / Javascript缩放单个SVG元素？如何使用jQuery更改SVG元素属性？如何使用jQuery / Javascript旋转单个SVG元素？ jQuery选择里面的SVG锚元素<object>标签 jQuery获取SVG中具有指定ID的所有元素

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM