包含带有HTML的SVG文件,仍然可以应用样式吗？
Axi*_*ite 15 html javascript css jquery svg
您可以通过embed object和svg标记将SVG文件包含在HTML文件中.
- 使用
embed或object标记需要将图像与URL链接.(这是我更喜欢的,因为我不喜欢我的HTML代码中的所有SVG代码,所以我想保持这种方式.) - 使用
svg标记(AFAIK)需要在HTML代码中内嵌SVG代码.
我的问题是:
如何将SVG图标,图像和其他文件包含到我的HTML文件中,而不必将整个SVG代码放入其中,并且仍然可以将样式应用于它们？通过JS应用它们也很好.
注意:
当我通过object或包含它们时embed,我似乎无法通过jQuery访问它们,即使是$("#my-svg-div").find("svg")(顺便说一下,几乎所有关于SO的答案都说我应该).我得到了undefined.
谢谢!
And*_*ems 24
简答
您可以通过编程方式内联SVG图像.这样的图像可以基本上与实际的内联<svg>元素相同地处理,包括能够将样式应用于它.
如果你的SVG图像是在引用<object>或<iframe>元素(e),您可以按如下内联它:
e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);
如果在<embed>元素中引用了SVG图像,请.contentDocument在上面的代码中替换.getSVGDocument().
如果在<img>元素中引用了SVG图像,则可以使用完全不同的策略(涉及AJAX并在下面描述)来内联图像.
一般战略
如果您的外部SVG图像文件是同源的(例如,图像是从与HTML代码相同的位置加载的),那么允许对这些图像进行样式化的一种方法是以编程方式将它们内联如下:
- 检索外部SVG文件的内容.
- 将该内容直接添加回与原始引用元素相同的HTML DOM位置中的HTML文件,即将其"内联".
- 删除最初引用外部SVG文件的元素.
优点
这种内联策略为您提供了两个世界中最好的:
您可以获得单独图像文件的好处,包括:
- 独立于HTML组织图像文件,
- 保持原始HTML文件不受图像细节的影响,并且
- (可能)允许浏览器缓存图像(但请参阅下面关于最后一点).
然而,您仍然可以对最终内联的SVG图像执行任何操作,您可以对
<svg>真正内联的元素执行这些操作,包括:- 将CSS样式应用于它们,
- 将事件侦听器应用于单个SVG形状或组等.
履行
对于<object>或<iframe>元素:
您可以按如下方式内联外部引用的SVG代码:
// using vanilla JavaScript (as shown above):
e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);
// using jQuery:
$e.replaceWith($($e[0].contentDocument.documentElement).clone());
...在哪里e或者$e是你选择了外部SVG引用<object>或<iframe>元素的vanilla或jQuery变量.
要包含<embed>元素:
相反,如果您使用的是外部SVG引用<embed>元素,则可以通过.contentDocument在上面的代码中替换.getSVGDocument()(请注意其他括号)来内联SVG内容.请注意,在实际使用所有三种元素类型时,.contentDocument它不适用于<embed>元素.getSVGDocument().但是.getSVGDocument() 已弃用,因此只有在您确实需要<embed>元素时才应使用.
要包含<img>元素:
上述策略都不适用于<img>元素.要内联这些内容,您可以检索元素的src属性,<img>为该文件发出AJAX请求,<svg>使用检索到的SVG代码创建新元素,并用<img>新<svg>元素替换原始元素.如果您希望此策略适用于所有四种元素类型,那么请注意引用的SVG图像的URL保存在元素的src属性中<iframe>,<embed>而<img>元素保存在元素的data属性中<object>.该策略可以实现如下:
// using vanilla JavaScript:
var xhr = new XMLHttpRequest();
xhr.open("GET", e.getAttribute(e.nodeName === "OBJECT" ? "data" : "src");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
e.outerHTML = xhr.responseText;
}
};
// using jQuery:
$.get($e.attr($e.prop("nodeName") === "OBJECT" ? "data" : "src"), function(data) {
$e.replaceWith(data.documentElement);
});
例
以下示例演示了上述策略的用途,并且不允许将外部CSS样式应用于原始外部SVG图像.(我没有创建代码片段或jsfiddle,因为需要引用本地外部文件.)
以下两个屏幕截图显示了内联之前和之后的CSS样式(红色三角形)或缺少(黑色三角形).它示出了用于SVG图像的结果最初嵌入在HTML( <svg>)或引用在所指示的元件(<object>,<iframe>,<embed>,和<img>).这三行显示了使用三种指示策略的内联结果.
在单击按钮之前,尚未尝试内联,并且屏幕如下所示.只有嵌入式SVG元素(第1列)的样式:
单击按钮后,尝试进行内联,屏幕现在看起来像这样.CSS样式已成功应用于某些元素:
此示例所需的代码如下:
image.svg (外部引用的文件,即未嵌入HTML中):
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px">
<polygon points="25,5 45,45 5,45 25,5"/>
</svg>
index.html (显然,如果不使用jQuery,则删除jQuery脚本行):
<!DOCTYPE html>
<head>
<link href="styles.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<button>Click to attempt to inline svg images.</button>
<table>
<tr>
<th></th>
<th>svg </th>
<th>object</th>
<th>iframe</th>
<th>embed </th>
<th>img </th>
</tr>
<tr>
<td>contentDocument</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><polygon points="25,5 45,45 5,45 25,5"/></svg></td>
<td><object data="image.svg" type="image/svg+xml"></object></td>
<td><iframe src="image.svg" width="50" height="50" style="border: none;"></iframe></td>
<td><embed src="image.svg" type="image/svg+xml" /></td>
<td><img src="image.svg" /></td>
</tr>
<tr>
<td>getSVGDocument()<br />(deprecated)</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><polygon points="25,5 45,45 5,45 25,5"/></svg></td>
<td><object data="image.svg" type="image/svg+xml"></object></td>
<td><iframe src="image.svg" width="50" height="50" style="border: none;"></iframe></td>
<td><embed src="image.svg" type="image/svg+xml" /></td>
<td><img src="image.svg" /></td>
</tr>
<tr>
<td>XMLHttpRequest</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><polygon points="25,5 45,45 5,45 25,5"/></svg></td>
<td><object data="image.svg" type="image/svg+xml"></object></td>
<td><iframe src="image.svg" width="50" height="50" style="border: none;"></iframe></td>
<td><embed src="image.svg" type="image/svg+xml" /></td>
<td><img src="image.svg" /></td>
</tr>
</table>
</body>
</html>
styles.css(只有这一polygon行对于展示内联非常重要):
polygon {fill: red;}
table {border-collapse: collapse;}
td, th {border: solid black 1px; padding: 0.4em;}
main.js (jQuery版):
$(document).ready(function() {
$("button").click(function() {
["object", "iframe", "embed", "img"].forEach(function(elmtType) {
var $e, $threeElmts = $(elmtType);
$e = $($threeElmts[0]);
if ($e[0].contentDocument) $e.replaceWith($($e[0].contentDocument.documentElement).clone());
$e = $($threeElmts[1]);
if ($e[0].getSVGDocument) $e.replaceWith($($e[0].getSVGDocument().documentElement).clone());
$e = $($threeElmts[2]);
$.get($e.attr($e.prop("nodeName") === "OBJECT" ? "data" : "src"), function(data) {
$e.replaceWith(data.documentElement);
});
});
});
});
main.js (vanilla JavaScript版):
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function() {
["object", "iframe", "embed", "img"].forEach(function(elmtType) {
var e, threeElmts = document.querySelectorAll(elmtType);
e = threeElmts[0];
if (e.contentDocument) e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);
e = threeElmts[1];
if (e.getSVGDocument) e.parentElement.replaceChild(e.getSVGDocument().documentElement.cloneNode(true), e);
e = threeElmts[2];
var xhr = new XMLHttpRequest();
xhr.open("GET", e.getAttribute(e.nodeName === "OBJECT" ? "data" : "src"));
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) e.outerHTML = xhr.responseText;
};
});
});
});
请注意以下事项:
- 此策略将要求您处理与原始引用元素关联的任何特征,例如回退图像
id和class(或任何其他)属性,事件侦听器,iframe功能等. - 确保在实际加载图像文件后才尝试内联.
- 考虑在服务器端进行内联以允许提供单个文件,但在客户端进行内联以允许图像文件缓存.
- 我在Firefox 44.0,Chrome 49.0和Opera 35.0(Mac和Windows),Safari 9.0(Mac)和IE 11(Windows)中验证了这一策略.我没有检查Edge或任何移动浏览器.
- 该解决方案解决从引用SVG文件
object,iframe,embed,和img元素.它不涉及CSSbackground-image属性或上下文drawImage函数中引用的外部SVG图像<canvas>.我怀疑那些不会这样,但我没有检查. - 如果您试图通过复制和保存代码然后"打开"来复制本地计算机上的示例代码
index.html,Chrome和Opera会有安全设置,这将使这一切变得不可能.要使这些浏览器在这样的本地配置中工作,您需要按照其他SO问题中的指示运行本地服务器.如果您在正常的服务器托管网站中使用内联策略,则应该没有此类问题.
- 天哪.你拥有这个答案.我希望它得到应有的关注.干得好. (3认同)
- 谢谢@tayvano的赞美.我(希望)通过包含一个替代策略(使用AJAX)以允许除<object>,<iframe>或<embed>元素之外的<img>元素内联,更好地做出了答案. (3认同)
这是最全面的演练，涉及 (1) 在 HTML 中使用 SVG 的不同方式，以及 (2) 您可以通过 CSS/JS 对 SVG 的各个部分（即：路径）进行样式设计。
https://css-tricks.com/using-svg/
In an image tag (ie:
<img src="picture.svg" />or as a background image in CSS = no stylingInline - style away, but it'll clutter your HTML. PHP helps here, or you could use a gulp build task or something to keep the SVGs from cluttering your working code, while still being inline in the end.
As an object you can now add CSS within the .svg file:
Run Code Online (Sandbox Code Playgroud)<svg ...> <style> /* SVG specific fancy CSS styling here */ </style> ... </svg>or
Run Code Online (Sandbox Code Playgroud)<?xml-stylesheet type="text/css" href="svg.css" ?>Data URIs - can be great for background images. No styling.