草庐IT

javascript - 从周围的 HTML 调用 SVG 内部的 JavaScript 函数

coder 2023-08-04 原文

我在这里创建了一个小页面:

<!DOCTYPE html>
<html>
  <head>
     <title>Test</title>
     <script type="text/javascript">
     function test() {
        executeAnimation();
     }   
     </script>
  </head>
  <body>
     <h1>Tester</h1>
     <embed src="test.svg" type="image/svg+xml" /> 
     <hr />
     <input type='button' value='Test' onclick='test()' />
  </body>
</html>

test.svg 看起来像这样:

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="testSvgId" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="950" height="900">
     <title>Title</title>
     <desc>Desc</desc>
     <defs>
          <script type="text/javascript">
          <![CDATA[
          function executeAnimation () {
              document.getElementById('anim').beginElement();
          }
          ]]>
          </script>
     </defs>
     <ellipse cx="500" cy="1090" rx="600" ry="0" fill="rgb(94,114,54)">
          <animate id="anim" attributeType="XML" attributeName="ry" begin="indefinite" dur="2s" from="0" to="350" fill="freeze" />
     </ellipse>
</svg>

如您所见,我想从 HTML 页面中的 JavaScript 调用在 SVG 图像中定义的函数 executeAnimation()。这实际上是行不通的。

我也试过这个:

<svg onload='onloadFunction()'...>
...
function onloadFunction() {
    alert('i am loading');
    window.executeAnimation = executeAnimation();
}

这是在另一个论坛中提出的建议,但这也不起作用(window.executeAnimation 未从外部定义)。

真正正确的方法是什么?

最佳答案

没有看到你的 .svg 的来源,就不可能具体回答......

检查一下:https://codepen.io/lambdacreatives/pen/uygzk

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="77px" height="77px" viewBox="0 0 77 77" enable-background="new 0 0 77 77" xml:space="preserve">
  <g>
    <path id="d" fill="#ffffff" d="M49.045,61.112c2.549-1.198,4.867-2.798,6.857-4.743L36.83,13.587c-2.862,0.186-5.602,0.826-8.124,1.899
    l6.448,14.465l-15.12,25.387c1.866,2.038,4.044,3.785,6.489,5.118L39.236,39.11L49.045,61.112z"/>

    <path id="circle" fill="#ffffff" d="M38.457,67.2c-15.852,0-28.701-12.848-28.701-28.701c0-15.851,12.85-28.697,28.701-28.697
    c5.773,0,11.137,1.72,15.639,4.653l4.605-7.702c-6.049-3.873-13.114-5.998-20.359-5.998C17.531,0.754,0.6,17.687,0.6,38.499
    c0,20.813,16.932,37.746,37.742,37.746c8.438,0,16.48-2.773,23.061-7.865l-3.809-8.533C52.514,64.405,45.818,67.2,38.457,67.2z">
        <animateTransform 
               xlink:href="#circle"
               attributeName="transform" 
               attributeType="XML"
               id="ani-circle"
               type="rotate"
               from="0 38.501500725746155 38.4994986653327945"
               to="360 38.501500725746155 38.4994986653327945" 
               dur="0.3s"
              begin="click"
               repeatCount="1"
               fill="freeze" />

    </path>
  </g>
</svg>
<br><br>
<button id="trigger">Trigger Animation</button>

CSS

body {
  background-color: black;
  text-align: center;
}

svg {
  height: 100%;
  width: 200px;
  path {
    fill: white;
  }
}

JS

$( "#trigger" ).click(function() {
  document.getElementById("ani-circle").beginElement();
});

如果您无法解决这个问题,请发布您的 .svg 的来源,我会为您提供一个具体的答案。

关于javascript - 从周围的 HTML 调用 SVG 内部的 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11900452/

有关javascript - 从周围的 HTML 调用 SVG 内部的 JavaScript 函数的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  3. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  5. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词,但有时效果很好,在某些情况下会出现此错误?这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊,我找到了!gsub!是一个非常奇怪的方法。首先,它替换了字符串,所以它实际上修改了

  6. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. c# - 如何在 ruby​​ 中调用 C# dll? - 2

    如何在ruby​​中调用C#dll? 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器,如果它还没有,则使用Ruby的WIN32OLE库来调用它;看看RubyCLR,其中一位作者是JohnLam,他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了,可能不支持.Net2.0以上的版本);正如其他地方已经提到的,看看使用IronRuby,如果这是您的技术选择。有一个主题是here.请注意,最后一篇文章实际上来自JohnLam(看起来像是2009年3月),他似乎很自在地断言RubyCL

  10. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

随机推荐