草庐IT

javascript - 在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作

coder 2023-07-05 原文

我有一个 SVG 图像，显示了地理区域。
http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg

我想在网页上显示 SVG 图像，并使用 JavaScript 和 CSS 的组合与图像进行交互。 (即，检测区域上的点击，为区域设置不同的背景颜色)。

我知道在 StackOverflow 上多次问过这个问题，但我找不到完整的代码示例来进一步研究。欢迎任何关于 JavaScript 包(如 jQuery)或插件的建议。

最佳答案

我对这个问题的理解是有不同的方面需要解决:

  • 如何为交互准备图像
  • 如何在页面中嵌入图片
  • 如何在 SVG 中使用 CSS
  • 如何使用 JavaScript 进行交互

    • 准备图像
    首先，我建议清理图像。 Inkscape 会留下所有您不需要的东西，其中包括 sodipodi: 中的元素和属性。和 inkscape:命名空间以及重复和/或冗余的样式属性。您不必删除它，但它可以为您节省一些带宽/加载时间，如果您想使用 CSS 样式表，那么样式属性会妨碍您。
    在您的示例文件中，您有 472 次相同的样式属性。删除所有这些并创建一个等效的 CSS 规则一次。
    您还可以在标记中添加一些有关市政当局的信息。你可以例如根据名称更改代表自治市的每条路径的 ID。您也可以使用 data-*属性用于此目的。后者的优点是可以使用空格。请参阅下文，了解这对交互有何用处，尤其是与 CSS 交互时。
    嵌入图像
    我建议使用 SVG inline，特别是如果你想与 CSS/JavaScript 交互。这意味着，您只需将 SVG 标记添加到您的 HTML，或者您使用 Ajax 加载和插入它。后者的好处是周围页面加载速度更快，响应速度更快。
    内联 SVG 元素的示例:
    <div id="svgContainer">
  <!-- This is an HTML div, and inside goes the SVG -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
    <circle r="50" cx="50" cy="50" fill="green"/>
  </svg>
</div>
    如何使用 Ajax 加载 SVG 的简化示例:
    xhr = new XMLHttpRequest();
xhr.open("GET","my.svg",false);
// Following line is just to be on the safe side;
// not needed if your server delivers SVG with correct MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.onload = function(e) {
  // You might also want to check for xhr.readyState/xhr.status here
  document.getElementById("svgContainer")
    .appendChild(xhr.responseXML.documentElement);
};
xhr.send("");
    如何使用 CSS
    SVG 可以像 HTML 一样设置样式。当然，SVG 有它自己的一组属性，比如 fill-opacity或 stroke-dasharray并且不支持很多 HTML 的属性，比如 margin , position或类似。但是选择器机制是 100% 相同的。
    您可以在 <style> 中将内联 SVG 的 CSS 与 HTML 的 CSS 混合在一起。元素或外部 CSS 文件。您也可以使用 <style> SVG 代码中的元素和 style属性。
    假设您为 SVG 元素提供了有意义的 ID 或 data-*属性，使用 CSS 突出显示自治市的两种方法是:
    #Bronckhorst, #Laarbeek {fill:red}
    或者
    *[data-gemeente=Bronckhorst], *[data-gemeente=Laarbeek] {fill:red}
    或者，当然，您可以更改各个元素的样式属性。属性也支持作为属性，即 style="stroke-width:2"也可以指定为 stroke-width="2" .如果使用属性和 CSS(使用样式属性、样式元素或外部样式表)设置相同的属性，则 CSS 会覆盖该属性。
    JavaScript 交互
    HTML 和 SVG 在 JavaScript 交互方面基本上没有区别，至少只要您使用普通的 DOM。这意味着，HTML 特定功能，如 innerHTML SVG 不支持(即没有 innerSVG )。但是 SVG 有它自己的图形特定的 DOM 方法集( see the W3C specs )。
    需要注意的一件事是使用命名空间。所有 SVG 元素都应该在 SVG 命名空间中，并且在使用 JavaScript 创建它们时，createElementNS()必须使用，而不是 createElement() :
    var use = document.createElementNS("http://www.w3.org/2000/svg","use")
    同样，XLink 命名空间中的属性(即 xlink:href )必须使用 setAttributeNS() 进行操作。而不是 setAttribute() :
    use.setAttributeNS("http://www.w3.org/1999/xlink","href","#foo")
    由于像 jQuery 这样的库部分依赖于 HTML 特定功能，因此在操作 SVG 时避免它们更安全。 [ 编辑 :自从我写了这个答案后，情况可能有所改善。不是 jQuery 用户，我不知道现在它的工作情况如何。] 还有 SVG 特定库，如 D3.js这对于特定目的很有用，值得一看。 (当我简单地将它称为 SVG 特定库时，我正在做 D3.js 不公正，因为它更多)。
    您可以使用 onclick和类似的属性和标准 DOM addEventListener() .使用 JavaScript 事件的一个非常简单的例子是向 <svg> 添加一个事件监听器。报告用户点击的城市名称的元素:
    document.getElementsByTagName("svg")[0]
  .addEventListener("click",function(evt){
    alert(evt.target.getAttribute("data-gemeente"))
  },
  false)
    旁注:工具提示
    与使用 title 获得的效果相同HTML 中的属性可以使用 <title> 来实现SVG 中的元素。只需放一个 <title>元素内的 SVG 元素并在悬停时，您会看到带有 <title> 内容的工具提示元素。
    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <rect width="100" height="100">
    <title>test</title>
  </rect>
</svg>

    关于javascript - 在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14068031/

    javascriptcode34SVGhtml

    有关javascript - 在 HTML 中嵌入外部 SVG 以进行 JavaScript 操作的更多相关文章

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

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

    2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

      在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

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

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

    4. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

      我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

    5. 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的路径中定义。这

    6. 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并在看到包时选择

    7. ruby - 如何进行排列以有效地定制输出 - 2

      这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

    8. ruby - 即使失败也继续进行多主机测试 - 2

      我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时，测试会在当前主机停止。即使测试失败，我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r

    9. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

      我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

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

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

    随机推荐