编辑：问题已解决

Question

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

我需要在其嵌入的HTML文件中引导 SVG-Object / Links。

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

SVG-File ：是一个sozi-presentation（太棒了，sozi！）。您可以使用sozi_file.svg＃frame01，....在html中更改演示文稿框架。以及对象标签＆＃34;对象数据=＆＃34; sozi_file.svg＃frame01＆＃34; ...＆＃34;

我想张贴类似＆＃34; 第02帧＆＃34;的链接在Menue-div中指导外部的演示。

如何定位？比如链接beeing＆＃34; a ...＆＃34; sozi_file.svg＃frame02＆＃34;框架02 / a

我的例子可以在这里找到，到目前为止没有工作链接，只有设置：http://noahmed.de/canvas_test/canvas.html 马克，这已经从第2帧开始＆＃34;＃f02＆＃34;，使用鼠标按钮，您可以点击演示文稿。

编辑：问题已解决

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

包含svg.file的对象标签需要name-attribut，以定位此ojbect-Tag。
链接需要包含target-attribut，请参阅ojbect-Tag中的name-attribut
href将类似于：svg-file.svg＃slide02等等。

惊人！

感谢您的帮助！

保

Answer 1

我会回答一下...... :)

您可以将函数调用放在对象的svg文件中，其中函数本身位于父HTML中。每个函数调用都将以＆＃39; parent＆＃39;开头，例如onclick="parent.myFunction()"该函数可以在Object的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>

从HTML引导SVG对象标记

编辑：问题已解决

1 个答案: