在<object>标签内选择SVG组的元素

时间：2019-12-19 08:21:39

标签： jquery svg colors

我有一个SVG外部文件，该文件在<object>标签中调用。 

 <object data="Img/PumpStation/Interfata.svg" type="image/svg+xml" id="p1"></object>

SVG包含两个组。 

 <svg>
   <g id="g1">
      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="93.75" x2="30.2922" y2="93.75" gradientTransform="matrix(1 0 0 -1 0 112.5)">
      <stop offset="0.01" style="stop-color:#4F4D4D" />
      <stop offset="0.51" style="stop-color:#F5F5F5" />
      <stop offset="1" style="stop-color:#4D4D4D" />
    </linearGradient>
    <path fill="url(#SVGID_2_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,3.266V37.5h23.423v-0.45V3.266l-1.577-2.703L27.59,0   h-0.676h-1.239H10.248L7.545,1.577L6.982,2.703L6.869,3.266" />

    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="78.1523" x2="30.2922" y2="78.1523" gradientTransform="matrix(1 0 0 -1 0 112.5)">
      <stop offset="0.01" style="stop-color:#4D4D4D" />
      <stop offset="0.51" style="stop-color:#F5F5F5" />
      <stop offset="1" style="stop-color:#4D4D4D" />
    </linearGradient>
    <path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,34.347h23.423" />

    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="105.8555" x2="30.2922" y2="105.8555" gradientTransform="matrix(1 0 0 -1 0 112.5)">
      <stop offset="0.01" style="stop-color:#4D4D4D" />
      <stop offset="0.51" style="stop-color:#F5F5F5" />
      <stop offset="1" style="stop-color:#4D4D4D" />
    </linearGradient>
    <path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,6.645h23.423" />
   </g>
   <g id="g2">
     <linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
       <stop offset="5%" stop-color="#01E400"></stop>
       <stop offset="25%" stop-color="#FEFF01"></stop>
       <stop offset="40%" stop-color="#FF7E00"></stop>
       <stop offset="60%" stop-color="#FB0300"></stop>
       <stop offset="80%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
   <circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"></circle>
   </g>
 </svg>

还有一个按钮：

<asp:Button ID="StartP1" class="startP btn btn-light" runat="server" Text="Start P1" Style="width: 100%" />

我知道如何在点击操作中替换stop-color标签中的所有stop。我通过使用以下jQuery函数来做到这一点：

    jQuery('.startP').on('click', function () {            
        $("object").contents().find('stop').each(function () {
            var color = jQuery(this).css('stop-color');
            if (color === 'rgb(77, 77, 77)') {
                jQuery(this).css('stop-color', '#00ff00');
            }
        });
    });

我的问题是我该如何仅对具有id="g1"的组而不对两个SVG组实现jQuery函数？

1 个答案:

答案 0 :(得分：0)

代码需要引用要转换的对象。您需要记住Jquery中的how that works：$("object")选择任何object，$(".object")选择任何具有object类和$("#object")的元素选择ID为object的任何元素。说$("object").contents().find('stop')时，可以选择stop元素内的任何object元素。如果您只想引用stop元素内的#g1，则可以通过几种方式来实现，例如：

  • $("object").contents().find('#g1').contents().find('stop')

  • $("object #g1 stop")

我准备了一个codepen link，其中您的功能已通过多种方式进行了调整。您有四个按钮可以更改两个对象的颜色（我必须更改第二个对象的渐变的末端以使其与第一个具有相同的颜色），仅第一个，仅第二个或重置为默认值。 / p>

评论后编辑

现在的问题是更笼统的。问题不仅在于如何选择一个特定的对象。问题：

  • 您的svg文件需要一个xmlns链接。

  • 您需要在设置事件之前确保加载object内容（例如，使用$(window).load()。

  • jQuery并不总是能很好地处理对象的内容（例如this）。

这是一种混合解决方案（并非唯一可行的解​​决方案）：

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>



$(window).load(function(){

var svg = document.getElementById("p1").contentDocument.documentElement;


  $('.startP').on('click', function () {            
        $(svg).contents().find("stop").each(function () {
            var color = jQuery(this).css('stop-color');
            if (color === 'rgb(77, 77, 77)') {
                jQuery(this).css('stop-color', '#00ff00');
            }
        });
    });

  $('.startOne').on('click', function () {            
        $(svg).contents().find("#SVGID_2_ stop,#SVGID_3_ stop,#SVGID_4_ stop").each(function () {
            var color = jQuery(this).css('stop-color');
            if (color === 'rgb(77, 77, 77)') {
                jQuery(this).css('stop-color', '#00ff00');
            }
        });
    });

  $('.startTwo').on('click', function () {   
        $(svg).contents().find("#linearColors stop").each(function () {
            var color = jQuery(this).css('stop-color');
            if (color === 'rgb(77, 77, 77)') {
                jQuery(this).css('stop-color', '#00ff00');
            }
        });
    });

$('.restart').on('click', function () {            
        $(svg).contents().find('stop').each(function () {
            var color = jQuery(this).css('stop-color');

            if (color === 'rgb(0, 255, 0)') {
                jQuery(this).css('stop-color', '#4D4D4D');
            }
        });
    });
});

</script>
</head>
<body>
<button class="startP">both</button> 
<button class="startOne">one</button> 
<button class="startTwo">two</button> 
<button class="restart">restart</button> 
<div></div>
<object data="delme.svg" type="image/svg+xml" id="p1"><img src="tfs860830.jpg" /></object>



</body>
</html>

SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg width="300" height="300" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="objsvg">
<defs>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="93.75" x2="30.2922" y2="93.75" gradientTransform="matrix(1 0 0 -1 0 112.5)">
  <stop offset="0.01" style="stop-color:#4F4D4D" />
  <stop offset="0.51" style="stop-color:#F5F5F5" />
  <stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="78.1523" x2="30.2922" y2="78.1523" gradientTransform="matrix(1 0 0 -1 0 112.5)">
  <stop offset="0.01" style="stop-color:#4D4D4D" />
  <stop offset="0.51" style="stop-color:#F5F5F5" />
  <stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="105.8555" x2="30.2922" y2="105.8555" gradientTransform="matrix(1 0 0 -1 0 112.5)">
  <stop offset="0.01" style="stop-color:#4D4D4D" />
  <stop offset="0.51" style="stop-color:#F5F5F5" />
  <stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
   <stop offset="5%" stop-color="#01E400"></stop>
   <stop offset="25%" stop-color="#FEFF01"></stop>
   <stop offset="40%" stop-color="#FF7E00"></stop>
   <stop offset="60%" stop-color="#FB0300"></stop>
   <stop offset="80%" stop-color="#4D4D4D"></stop>
   <stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
</defs>
   <g id="g1">
    <path fill="url(#SVGID_2_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,3.266V37.5h23.423v-0.45V3.266l-1.577-2.703L27.59,0   h-0.676h-1.239H10.248L7.545,1.577L6.982,2.703L6.869,3.266" />

    <path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,34.347h23.423" />
    <path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,6.645h23.423" />
   </g>
   <g id="g2">
   <circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"></circle>
   </g>
 </svg>

我也将linearGradient元素移到了defs部分。现在，代码直接引用了它们，而不是#g1或#g2。

编辑2

我已经设法通过示例设置了plunker。请注意，我叫svg delme.svg。

编辑3

如果您不能修改svg，我将使用Jquery获取svg代码，然后将其内联插入DOM。这样，您就不需要xlmns（并且您可以根据需要添加它）。我已经用新代码分叉了unk夫（link）。现在，svg文件没有xmlns属性。注意，makeInline函数接受object id，然后在svg内用修改后的div创建内联id。之后，您可以使用新的id（或添加的类）来标识新创建的元素。该功能还可以删除原始对象，以免造成混乱。

相关问题
最新问题