【发布时间】：2020-04-28 17:42:35
【问题描述】：
我快要用图像（svg 文件）渲染 svg 了
当它自己加载时，这个渲染器在 Chrome 中是独立的。
starlight.svg
<svg width="92" height="88" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">
<defs>
<clipPath id="clip0"><path d="M81 101 173 101 173 189 81 189Z" fill-rule="evenodd" clip-rule="evenodd"/>
</clipPath>
</defs>
<g clip-path="url(#clip0)" transform="translate(-81 -101)">
<path d="M83.5001 145.5 95.6245 137.347 89.3949 124.5 104.166 123.226 105.5 109.127 118.959 115.073 127.5 103.5 136.041 115.073 149.5 109.127 150.835 123.226 165.605 124.5 159.376 137.347 171.5 145.5 159.376 153.653 165.605 166.5 150.835 167.774 149.5 181.873 136.041 175.927 127.5 187.5 118.959 175.927 105.5 181.873 104.166 167.774 89.3949 166.5 95.6245 153.653Z" stroke="#B4C7E7" stroke-miterlimit="8" fill="#B4C7E7" fill-rule="evenodd"/><path d="M100 145C100 130.641 111.864 119 126.5 119 141.136 119 153 130.641 153 145 153 159.359 141.136 171 126.5 171 111.864 171 100 159.359 100 145Z" fill="#FFFFFF" fill-rule="evenodd"/>
</g>
</svg>
在我的页面中，我通过 g 内的图像标签和 svg 标签内调用此 svg
如何在没有 0 宽 0 高 g 包围 html 中的 img 标记的情况下渲染它？
下图没有出现，g渲染无宽无高。
主页的sn-p
<g width="55px" height="55px" class="star">
<img width="55" height="55" src="/app/assets/images/starlight.svg" transform="translate(25,25)">
</img>
</g>
注意：直接在 d3.js 中渲染效果很好，所以我可能会坚持使用该方法。
let star = chart.select('svg g').selectAll('path.star').data([0]);
star = star.enter()
.append('g')
.attr('class', 'star')
.merge(star);
star.attr("d","M81 101 173 101 173 189 81 189Z")
.attr("fill-rule","evenodd")
.attr("clip-rule","evenodd")
.append('g')
.attr("clip-path","url(#clip0)")
.attr("transform","translate(-275 -195)")
.append('path')
.attr("d","M83.5001 145 95.6245 136.75 89.3949 123.75 104.166 122.461 105.5 108.194 118.959 114.211 127.5 102.5 136.041 114.211 149.5 108.194 150.835 122.461 165.605 123.75 159.376 136.75 171.5 145 159.376 153.25 165.605 166.25 150.835 167.539 149.5 181.806 136.041 175.789 127.5 187.5 118.959 175.789 105.5 181.806 104.166 167.539 89.3949 166.25 95.6245 153.25Z")
.attr("stroke","#B4C7E7")
.attr("stroke-miterlimit","8")
.attr("fill","#B4C7E7")
.attr("fill-rule","evenodd")
.style("opacity", 0.0)
.transition()
.duration(500)
.style("opacity", 1.0);
star = star
.append('path')
.attr("d","M100 144.5C100 129.864 111.864 118 126.5 118 141.136 118 153 129.864 153 144.5 153 159.136 141.136 171 126.5 171 111.864 171 100 159.136 100 144.5Z")
.attr("fill","#FFFFFF")
.attr("fill-rule","evenodd").attr("transform","translate(-275 -195)")
.style("opacity", 0.0)
.transition()
.duration(500)
.style("opacity", 1.0);
【问题讨论】：
-
jsfiddle.net/fyv41kaL/7 d3 的示例小提琴，在没有嵌入图像的情况下工作
-
我假设您的 .svg 图像的路径是正确的，并且您在斜线前用 2 个点尝试了它，如下 src="../app/assets/images/starlight.svg" 并且也许通过留下第一个斜线。有时文档可以做一些有趣的事情。
-
使用svg图片标签，你使用的是html
标签 svg图片标签：--
mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>跨度> -
您好，我已经在没有任何 .js 的情况下尝试了您的解决方案，我在本地计算机上进行了尝试，并将其放在我的网站上。我还删除了 g 并添加了一个 div，它适用于所有情况，svg 星形图像在我提到的所有情况下都显示。你一定有别的事情要做。还是我误解了你的问题？
-
Vahe，我在下面的答案中添加了其他内容。查看更改 svg 图像路径（文件夹或无文件夹）是否会改变任何结果。