相关疑难解决方法(0)

这是我提出的一个方便的代码的自我问答.

目前,没有一种简单的方法来嵌入SVG图像,然后通过CSS访问SVG元素.有各种使用JS SVG框架的方法,但如果你所做的只是制作一个带有翻转状态的简单图标,它们就会过于复杂.

所以这就是我提出的,我认为这是迄今为止在网站上使用SVG文件的最简单方法.它从早期的文本到图像替换方法中采用了它的概念,但据我所知,SVG从未做过.

这是个问题:

如何在不使用JS-SVG框架的情况下嵌入SVG并在CSS中更改其颜色？

我有一些指定SVG文件width和height以及viewbox这样的:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

但是如何在浏览器中以我决定的大小显示它们？我希望它们更小,并尝试过:

<object width="400" data="image.svg"></object>

但后来我得到了可见的滚动条.

如果我改变SVG文件设置它的工作原理width,并height以100%相反,但我想决定在HTML的大小,无论在SVG文件中使用什么尺寸.这可能吗 ？

我有一个SVG文件,我不想将其粘贴到HTML文件中,因为它会变得混乱.因此,在咨询了w3schools之后,"embed"标签似乎是将外部SVG文件包含到HTML中最安全的方式.

<embed src="path_to_svg" type="image/svg+xml" id='svgsource' />

但是,我需要通过主html文件中的javascript通过DOM访问svg元素.不幸的是

document.getElementById('my_svg_id')

也不

document.getElementById('svgsource').contentDocument

适用于任何浏览器.使用"object"标签也不起作用.

我正在尝试调试原因

var mapWin = svgMapDoc.getElementById(\'Map\');\n

树叶mapWin静止null。我设置了断点和监视，但 IDE 监视窗口中出现以下令人困惑的情况：

name: svgMapDoc.getElementById(\'MainSVG\') value: null\nneame: svgMapDoc.childNodes[2].attributes["id"].nodeValue value: "MainSVG"\n

（注意“MainSVG”是“Map”的父级。）

所以带有“MainSVG”的元素id存在于\'svgMapDoc\'中，它是第三个子节点，但getElementById无法返回它。为什么？我该如何修复它？

===========编辑===========

评论者要求提供 HTML。这很棘手，因为它非常复杂，但这里有一些片段。

它最初不是我的代码，而是来自英国国家统计局。他们提供英国 2011 年全国人口普查数据的访问权限。他们提供的一种访问方法是通过 SOAP API，并且他们在NeSS Data Exchange V2.0页面上给出了如何使用其 API 的示例。我无法让一个示例正常工作。It\xe2\x80\x99s在 ZIP NDE Hub Client REST v2.0 (Zip) 37 Mb中的NDE v2.0 Excel 客户端下，是一个基于 Excel 的集线器演示应用程序，允许用户建立已保存数据的存储库，并通过 SVG 专题图查看”。但请注意，我对他们的示例进行了一些更改。

地图<DIV>SVG 数据通过以下几行添加到页面：

document.writeln(\'<DIV id=mapPanel style="position:absolute;left:26%;top:7%; height=63%; width=50%;">\');\ndocument.writeln(\'<EMBED height=100% …

在我的页面上,我使用img标签嵌入SVG图像.现在我想对它们应用一些css.只要您将SVG源代码直接复制到页面中,这种方法就可以正常工作.但是,如果我使用img src属性嵌入它们,则不会.

有没有办法让这项工作？

<style type="text/css">
path:hover {
    fill:white;
}
</style>

<img src="my.svg" />

提前致谢!