【问题标题】：Steer SVG Object-Tag from HTML从 HTML 引导 SVG 对象标记
【发布时间】：2014-03-15 13:15:17
【问题描述】：

社区！
我经常在这里找到问题的答案。
现在我有一个，我目前无法解决。

我需要从其嵌入的 HTML 文件中控制 SVG-Object / 链接。

设置： HTML 文件 - 一个带有 SVG 文件的 div，与 Object-Tag 链接 - 在它上面的另一个 div，使用 z-index，作为 SVG 文件的菜单。

SVG-File：是一个 sozi 演示文稿（太棒了，sozi！）。您可以使用 sozi_file.svg#frame01 在 html 中更改演示框架，.... 以及对象标签“object data="sozi_file.svg#frame01" ...”

我想在 Menue-div 中放置“Frame 02”之类的链接，以便从外部引导演示。

如何定位？就像链接beeing "a ... "sozi_file.svg#frame02" Frame 02 /a

我的例子可以在这里找到，目前没有工作链接，只是设置：http://noahmed.de/canvas_test/canvas.html 标记，这已经从第 2 帧开始“#f02”，使用鼠标按钮，您可以单击演示文稿。

编辑：问题已解决

sozi 的开发者 Guillaume 非常友好地回答了这个问题：

包含 svg.file 的对象标记需要一个名称属性，以针对此 ojbect-Tag。
链接需要包含target-attribut，引用ojbect-Tag中的name-attribut
href 将类似于：svg-file.svg#slide02 等等。

太棒了！

感谢您的帮助！

保罗

【问题讨论】：

标签： html svg

【解决方案1】：

我会试一试答案.. :)

您可以将函数调用放在对象的 svg 文件中，函数本身位于父 HTML 中。每个函数调用之前都会有“父”，例如onclick="parent.myFunction()" 该函数可以在对象的 svg 和/或父 HTML（或其他 html 驻留的 svg 元素，但不能在另一个对象中）中创建操作

这有点帮助吗？

下面是一个例子。您可以将其粘贴到您自己的 htm 文件中。还要制作 2 个 svg 文件：obj.svg 和 obj2.svg 文件。这可能不是您需要的，因为您无法单击 html 中将与对象中的 svg 交互的链接或函数。当然，您可以更改对象的data 值并将新的svg 文件调用到对象中。这显示在链接中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> SVG in Object : parent.functions</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>SVG in Object : parent.functions</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
SVG within an Object can include function calls that are resident in the parent HTML.  These functions can perform actions in either the parent html document and/or within the object.
</div>
<div style='width:400px;height:400px;background-color:lightgreen'>
<object data="obj.svg" type="image/svg+xml" id="objsvg" width="400" height="400"></object><br />
</div><br />
<i>Click on element to turn its fill color to orange</i><br /><br />
<a href=javascript:changeObjData()>Change Object Data</a><br /><br />
&lt;object data="obj.svg" type="image/svg+xml" width="400" height="400"&gt;&lt;/object&gt;
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF23<br /></div>
<script id=myScript>
/*  obj.svg file
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle onclick="parent.clickMe(evt)" id="myCircle" cx="100" cy="100" fill="blue" r="80" />
<rect onclick="parent.clickMe(evt)" id="myRect" x="200" y="200" fill="red" width="200" height="100" />
</svg>
*/

/*  obj2.svg file
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle  id="myCircle1" cx="50" cy="100" fill="blue" r="20" />
<circle  id="myCircle2" cx="100" cy="50" fill="green" r="20" />
<circle  id="myCircle3" cx="300" cy="100" fill="red" r="20" />
<circle  id="myCircle4" cx="200" cy="300" fill="orange" r="20" />
</svg>
*/
//---click within circle/rect element in the object---
function clickMe(evt)
{
   var target=evt.target
   target.setAttribute("fill","orange")
}
//--link---
function changeObjData()
{
   objsvg.data="obj2.svg"
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    jsValue.value=myScript.text

}
</script>
</body>

</html>

【讨论】：

这听起来非常值得一试——但是，我不是专家。由于我缺乏知识，您能否在我的示例中给我一个更具体的示例来说明如何处理这个问题？ IE。我会为我的链接应用什么函数来调用写入对象 SVG 的函数？在此先感谢弗朗西斯。
参见上面的编辑 - 我希望能够单击父 html 中的链接/文本/btn 以使嵌入的 *.svg 发生更改。有办法吗？