草庐IT

javascript - 使用 svg.js 加载 SVG 文件

coder 2023-08-04 原文

我有一个包含 SVG 元素的 HTML5 页面。我想加载一个 SVG 文件，从中提取一些元素，然后用脚本一个一个地处理它们。

我使用 jQuery 成功加载了 SVG 文件，使用 .load()，在 DOM 中插入了 SVG 树。但我想试试svg.js操作元素，但在文档中我找不到使用现有 SVG 元素初始化库的方法，我将在其中获取对象。

想法是访问加载的 SVG 元素(或直接使用 svg.js 库加载它)，将单个对象复制到另一个元素并将它们移动到我需要的位置。 如何做到这一点？

最佳答案

给定一个 SVG 文件 'image.svg' 包含

<svg viewBox="0 0 500 600" version="1.1">
  <rect x="100" y="100" width="400" height="200" fill="yellow" 
   stroke="black" stroke-width="3"/>
</svg>

和一个包含

的文件'index.html' 
<html>
  <head>
    <script type="text/javascript" src="svg.js"></script>
    <script type="text/javascript" src="jquery-X.X.X.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="svgimage"></div>
  </body>
</html>

然后如果文件 'script.js' 包含

$(document).ready(function() {

  var image = SVG('svgimage');
  $.get('image.svg', function(contents) {
    var $tmp = $('svg', contents);
    image.svg($tmp.html());
  }, 'xml');

  $('#svgimage').hover(
    function() {
      image.select('rect').fill('blue');
    },
    function() {
      image.select('rect').fill('yellow');
    }
  );

});

然后 SVG 图像将显示并将鼠标指针移入和移出 浏览器窗口的 会将矩形的颜色从黄色更改 变蓝。

您现在应该能够替换任何 SVG 图像文件并定义任意数量的函数来使用 SVG.js 库处理图像。需要意识到的重要一点是，如果调用 SVG.js 方法发生在 $(document).ready 函数返回之前，它们将不会成功。

对于奖励积分，我还发现通过在“$tmp”声明后添加以下行来复制“viewBox”、“width”和“height”属性的值最适合成功显示任意内容SVG 文件:

    image.attr('viewBox', $tmp.attr('viewBox'));
    image.attr('width', $tmp.attr('width'));
    image.attr('height', $tmp.attr('height'));

关于javascript - 使用 svg.js 加载 SVG 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15911246/

javascriptSVG3439sectionjqueryhtml

有关javascript - 使用 svg.js 加载 SVG 文件的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  7. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  8. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  9. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  10. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

随机推荐