通过JavaScript或JQuery处理SVG文件（对象）中的元素

我有一个在html代码中操纵SVG文件（对象）的挑战。 Snap，Raphael有解决方案，但我需要直接通过JavaScript或JQuery来完成。这是我到目前为止有：通过JavaScript或JQuery处理SVG文件（对象）中的元素

JS：

<object id="testSVG" data="image_library/grandstaff_drawing_only.svg"  
type="image/svg+xml" height=100% width=100%"> 
<img src="image_library/alto-clef.png" /> 
</object> 

<script> 

window.onload=function() { 
// Get the Object by ID 
var a = document.getElementById("testSVG"); 
// Get the SVG document inside the Object tag 
var svgDoc = a.contentDocument; 
// Get one of the SVG items by ID; 
var svgItem = svgDoc.getElementById("path3380"); 
// Set the colour to something else 
//svgItem.setAttribute("stroke", "red"); 
svgItem.style.stroke = "#ff0000"; 
}; 

</script>

JQuery的：

<object id="testSVG" data="image_library/grandstaff_drawing_only.svg"  
type="image/svg+xml" height=100% width=100%"> 
<img src="image_library/alto-clef.png" /> 
</object> 


<script> 

window.onload=function() { 
var svgDoc = $(“#testSVG”)[0].contentDocument; 
$(“#path3380”, svgDoc).css(“stroke”, “red”); 

}; 

</script>

谢谢！

来源

2015-05-02 LearnForever

你的问题是什么？ –

通常我使用D3.js库，当我想创建或操作单独的JavaScript的SVG图形。 http://d3js.org/

与Raphaeljs这样的多边形填充不同，lib提供了一个JavaScript API，用于实时在浏览器中直接操纵SVG元素。

D3是不是SVG填充工具： 与拉斐尔，这对不支持SVG浏览器对SVG提供填充工具。 D3直接操纵SVG，没有任何抽象层。您的浏览器需要支持SVG for D3才能正常工作。（source）

例如，下面是我从D3的教程，构造和操作SVG元素使用JavaScript的本地new Date()函数来创建一个实时的JavaScript/SVG驱动时钟做了演示：http://jsfiddle.net/2jogwx6x/1/

的D3.js策略可能适用于您的目的，elem选择方法类似于jQuery的CSS选择方法，但是直接与dom节点一起工作，但要使其工作，您需要直接将SVG数据嵌入到DOM中，例如：

<!-- simple rectangle - replace this with your real svg data --> 
<svg width="400" height="110"> 
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"> 
</svg>

代替使用<object id="testSVG" data="image_library/grandstaff_drawing_only.svg" type="image/svg+xml" height=100% width=100%">

要在对飞它必须是DOM的一部分，而不是打开/写入/关闭外部文件的DOM操纵SVG数据。

来源

2015-05-02 17:58:09 DrewT

看到这个SO线程，如果你想更详细地了解如何使用D3更改SVG img的svg路径和笔划颜色：http://stackoverflow.com/questions/22621865/how-to-update-an-svg-path-with -d3-js – DrewT

大家好。谢谢DrewT，您的意见。 Paul LeBeau，我尝试通过JavaScript或JQuery来操作EXTERNAL SVG文件，而不使用Raphael，Snap等。可能会有超过10个SVG文件，每个文件可能会很长，所以我尽量避免将Inline SVG XML嵌入到HTML页。我发布的代码（JS或JQuery）有什么问题？它加载对象“testSVG”，但我不能操纵一个单独的元素（例如“path3380”）来改变笔画的颜色。我该怎么做？谢谢。 – LearnForever

@LearnForever您忽略了我的帖子中解释特定问题的部分：**“要动态操作DOM中的SVG数据，它必须是DOM的一部分，而不是打开/写入/关闭外部文件。 “**如果您需要为许多SVG文件执行此操作，请动态加载它们。如果你正在使用'php'，你可以使用'file_get_contents（）'，但是你需要它们在DOM中，否则你不能在文件本身写入数据的情况下操作属性，1）更改文件真实的内部内容2）同时用户访问同一图像的服务器问题 – DrewT

通过JavaScript或JQuery处理SVG文件（对象）中的元素

回答

相关问题