草庐IT

关于javascript：有没有办法将svg容器塑造成它的内容？

codeneng 2023-03-28 原文

Is there any way to shape the svg container to its content?

我正在开发一个交互式地图，其中可以看到箭头。这些箭头是用 SVG 代码制作的。单击 SVG 容器时，会显示如下图所示的弹出窗口：

主要问题是投币容器(标有实心 1px 白色边框)充当显示弹出窗口的点击区域，当一些箭头靠近时，很难专门点击其中一个，如下例所示：

所以我试图让 svg 容器像更大的箭头：

使其易于点击所需的箭头。

我不是一个非常有经验的 HTML/javascript 开发人员，所以我不知道是否可以将 SVG 容器"塑形"到它的内容，使其使用相同的"箭头" " 形状，如果可能的话，我应该如何进行？

编辑 1：带有示例的 jsfiddle：

我正在使用以下 javascript 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function windArrow(speed, angle)
{    
  //var angulo = 0;
  var direction = 90-angle;
  // var speed = 20;
  var x = speed*Math.cos(deg2rad(direction)).toFixed(4);
  var y = speed*Math.sin(deg2rad(direction)).toFixed(4);
  var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px"><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,2 L2,1 z" stroke="none" fill="red"/><path stroke-width=".3" stroke="white" fill="none" d="M0,0 L0,2 L2,1 z" /></marker></defs>';
  var outerArrow = '<g class="outerArrow"> <path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
  var innerArrow = '<g  class="innerArrow"><path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
  var svgFoot = '</svg>';
  return svgHeader+outerArrow + '\
' + innerArrow + svgFoot;
}
document.getElementById('arrow').innerHTML = windArrow(20,45);

演示：https://jsfiddle.net/manespgav/at8y24dL/3/

  • 当您说"当某些箭头靠近时，很难专门单击其中一个"时，我不确定您的意思。裁剪此图像以显示有问题的情况，然后显示您希望它的外观(只需使用 Photoshop 或其他工具绘制)，描述它希望它如何处理静态图像中无法捕获的位(例如，如果用户移动鼠标或点击重叠区域)
  • 当您想要一个简单的解决方案时，我认为制作箭头是不可能的(是的，如果您创建大量 div's 并将它们一起制作成一个形状，则可以)，但是您可以在箭头周围制作一个小 div 并给它border-radius:100%
  • 只是一个注释。即使你把它变小，它仍然可能重叠(或者不会重叠)？
  • @RamondeVries Border-radius：100% 不会避免重叠，但会有所改善

我不太确定你想要什么，但你可以将 onclick 绑定到 svg 组件

1
2
3
svg { pointer-events: none; border: 1px solid black;}
svg * { pointer-events: auto;}
#g2 { position:absolute; left:50px;}
1
2
3
4
5
6
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="gray" onclick="console.log('clicked Gray')"/>
</svg>
<svg id=g2 height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" onclick="console.log('clicked Green')"/>
</svg>

  • 如果我发现如何取消注册包含 svg 的 div 的单击事件，这可能是一个很好的解决方案，因为此事件来自Leaflet类
  • @manespgav 是的，答案已更新。 (您仍然需要考虑 z 顺序，但这是另一回事)
  • 谢谢你，我找到了你的建议的解决方案:)

有多种方法可以解决您的问题。正如此处的另一个答案所述，您可以将单击事件绑定到 SVG 图形的相关元素——例如明确定义的箭头、整个箭头、箭头或其他任何内容的命中框。

另一种解决方案，我个人认为它是您应该更喜欢的解决方案——因为您的 SVG 尺寸看似随意，而且考虑到它只是硬编码并且您的箭??头仅占其中的一部分，因此没有多大意义.您想要的是通过在 SVG 元素上使用 viewBox 属性来更正 SVG 文档视口。

SVG 规范很好地涵盖了它，但简而言之，您的问题是您的 SVG 的尺寸为 100 x 100 像素，而它呈现的箭头图形要小得多。从根 SVG 元素中删除 width 和 height 属性，添加 viewBox 属性并为视口添加适当的值(将其调整为箭头图形的边界框)，并使用 CSS 来控制渲染的尺寸svg 地图上的元素。

  • 我需要让 if 为固定的"图标大小"，因为缩放时标记"漂移"
  • 它在缩放时漂移，因为您的锚点坐标是错误的。如果你仔细想想，你就会明白我的意思。但是，如果没有您详细说明问题的放大，我认为我无法为您提供进一步的帮助。您正在处理一个非常简单的问题，但我们需要详细信息来帮助您。它不应该评论我的回答，但你应该编辑你的问题。
  • 你是对的，那是因为我需要使用固定的高度和宽度(目前，100px x 100px)，iconAnchor 为 50px，50px

指针事件可以帮助您获得更准确的点击区域：

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

容器javascriptspanclassquotcsshtmlleafletsvg

有关关于javascript：有没有办法将svg容器塑造成它的内容？的更多相关文章

  1. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  2. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  3. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  4. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  5. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  6. ruby - 有没有办法从 ruby​​ case 语句中访问表达式？ - 2

    我想从then子句中访问c​​ase语句表达式，即food="cheese"casefoodwhen"dip"then"carrotsticks"when"cheese"then"#{expr}crackers"else"mayo"end在这种情况下，expr是食物的当前值(value)。在这种情况下，我知道，我可以简单地访问变量food，但是在某些情况下，该值可能无法再访问(array.shift等)。除了将expr移出到局部变量然后访问它之外，是否有直接访问caseexpr值的方法？罗亚附注我知道这个具体示例很简单，只是一个示例场景。 最佳答案

  7. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  10. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

随机推荐