javascript - 如何在 SVG 的工具提示上添加图像?
问题描述
尝试在 SVG 地图内的工具提示上引用图像。参考如下:
<path
inkscape:connector-curvature="0"
id="BD"
data-info="<div>Bangladesh</div><div><img src="http://www.digi4health.org/wp-content/uploads/2018/09/bd.png" alt="Bangladesh mHealth" width="600" height="171"></div><div>Some Description</div>"
data-name="Bangladesh"
data-id="BD"
d="m 1486.5,431.9 -4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
style="fill:#c1f4ff;fill-rule:evenodd" />
我有 SVG 世界地图,我在与我的项目相关的弹出信息框中添加了一些描述。目前,在信息框上我只有文字。我正在尝试在弹出信息框中包含一些图片。
在这里,我分享完整的代码以便更好地理解。感谢您的支持。
解决方案
你的代码全错了,我不太确定你在问什么。看看下面的例子,告诉我这是否是你需要的:
<svg viewbox = "1450 400 50 50">
<clipPath id="Bangladesh">
<path d="m 1486.5,431.9 l-4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
/>
</clipPath>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="1450" y="400" height="50" width="50" clip-path="url(#Bangladesh)"/>
</svg>
我无法使用您的图片,因为它来自 http(不安全)。
推荐阅读
- perforce - 为什么我无法在 Perforce 中删除工作区并出现此错误:“流层次结构中缺少流''...”
- c++ - 是 `[](std::list
& list){return std::move(list)}(list)` 保证将 `list` 留空? - sql - 日期转换“超出范围值”错误,在 WHERE 子句下转换日期
- python - 输出数据帧不完整
- redux - 如何识别 redux-saga 中的错误来自哪里?
- javascript - GetStream - 发送分析参与时出错
- linux - 希望使用命令计算第 1 列中某个日期范围内的第 6 列中的项目数
- sql - SQLite 计算最大尝试次数
- python - Python - 如何将 Panda 中的元素从列表转换为字符串
- google-apps-script - 获取文件详细信息并将图像加载到电子表格中