相关疑难解决方法(0)
(非空)自动关闭标签在HTML5中有效吗？
的W3C验证不喜欢自闭合标签(那些与"端/>")上非空元素.(Void元素是那些可能不包含任何内容的元素.)它们在HTML5中仍然有效吗？
可接受的 void元素的一些示例:
<br />
<img src="" />
<input type="text" name="username" />
被拒绝的非虚元素的一些例子:
<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
注意: W3C验证器实际上接受无效的自动关闭标签:由于简单的拼写错误(\>而不是/>),作者最初遇到了问题.但是,自动关闭标签在HTML5中通常不是100%有效,并且答案详细说明了各种HTML风格的自闭标签问题.
推荐指数
解决办法
查看次数
如何在<img>元素中访问SVG文件的内容？
假设你的HTML中有这个:
<img src='example.svg' />
您如何<rect>, <circle>, <ellipse>通过JavaScript访问example.svg 的内容(即等等)？
推荐指数
解决办法
查看次数
具有PNG后备的浏览器中的图像的SVG
我想在网站上使用公司徽标的SVG版本.目前,主流浏览器的所有当前版本(IE,Safari,Chrome,Firefox,Opera)都支持SVG,所以这看起来并不疯狂.但是,旧的浏览器仍然存在,所以我需要回到PNG支持.
显而易见的解决方案是将SVG内容放在这样的object标签中(原谅内联样式......):
<object data='logo.svg' style='height:3em' >
<img src='logo.png' style='height:3em' />
</object>
理论上应该在object可能的情况下渲染,或者渲染img.但是,Chrome不喜欢这样并且将height样式应用于对象本身而不是SVG,因此我最终得到了一个带有滚动条的iframe类似框,显示了一个巨大的徽标.
另一个解决方案是使用PNG作为img源,然后在渲染时将其与带有javascript的SVG源交换出来,如果我认为我在支持SVG的浏览器上运行的话.这并不理想,因为PNG仍然会被下载,而且我不是知己,我可以正确检测SVG支持.不幸的是,jQuery似乎没有SVG检测功能.
最后,由于我的网站使用ASP.NET部署,我可以在提供页面之前检查用户代理字符串,并img根据我是否认为它将支持SVG来指定源.但这也有潜在的问题,我不是知己,我可以做出正确的决定.
为图像做SVG的首选方法是什么？
推荐指数
解决办法
查看次数
全宽和高SVG
困境:制作一个完整的窗口svg图像,填充方面失真,不使用SVG标签.为什么没有svg标签？因为我打算在页面的生命周期中稍后交换SVG(如果不经常),我还没有找到一种简单的方法来做到这一点.
失败的尝试:
<!-- for the record, my style are in a css file,
for example purposes they are style attrs-->
<!-- Working in Webkit but not in firefox, in firefox blocks stretching
and places the svg in the middle of the tag-->
<img src="my.svg" style="width:100%;height:100%;
position:fixed;top:0;left:0;bottom:0;right:0;" />
<!-- Both Webkit and Firefox block distortion, so the svg
appears centered in the div rather than conforming to the div-->
<div style="width:100%;height:100%;position:fixed;top:0;
left:0;bottom:0;right:0;background-size:cover;
background-image:url(my.svg);" />
我也试过了
background-size:contain;
background-size:cover;
background-size:100% 100%;
background-postion: center …推荐指数
解决办法
查看次数
如何删除HTML5中<svg>和<td>之间的空格？
我使用下面的代码在HTML5中嵌入SVG.现在我无法解决的唯一问题是在浏览器中查看HTML文件之间<svg>和之间有很大的空间<td>.谁能告诉我如何删除空间？
先感谢您!
更多细节:
对不起,我忘了说我用的是哪个浏览器.我发现当我使用IE9时,SVG与左右栏之间有很大的空间.但是,当我使用Chrome时,SVG与顶部和底部栏之间有很大的空间.这很奇怪.
我编辑下面的代码.我添加了svg {margin-top:0px; 边距:0像素; 保证金右:0像素; 保证金左:0像素;背景色:黄;}
在代码中.我想要做的是删除黄色空间.现在问题变得更具体了.
<!DOCTYPE html><html>
<head>
<title>SarShips: scs</title>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
table {margin-left:auto;margin-right:auto}
tr.odd {background-color:#E0E0F0}
tr.even {background-color:#F0F0FF}
th {font:22px sans-serif;background-color:#98AFC7;color:white;padding:6px}
td.e {font:bold 15px serif;text-align:right;padding:4px}
td.v {font:15px monospace;text-align:left;padding:4px}
td.i {padding:4px}
p {text-align:center}
svg {margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;background-color:yellow;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Parameters</th><th>Imagette</th><th>Profile</th><th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td><td class="i"></td>
<td class="i">
<svg width="100%" height="100%" viewBox="0 0 400 …推荐指数
解决办法
查看次数
Inkscape 突出显示 svg 的不同部分并在 html 中操作 svg 地图
场景：想要在特定城市的地图上提供丰富的图形图表。由于我找不到该城市的官方 svg 版本地图，所以我决定自己尝试一下。
我获得了该城市的官方 pdf 地图，并使用 inkscape 将其转换为 svg。我希望能够在地区级别操作地图。使用 inkscape，我可以将区域边界进一步划分为我想要处理的分区。然后我想操纵或在这些分区上工作。
地区级别是路径（在 inkscape 术语中）。
a) 在 Inkscape 中，选择“按路径编辑节点”选项后，如何分割各个区域（进一步的区域）以便它们显示为路径。我没能实现这种分裂。
b) 给定 svg，然后我将其导入到 html 中。我如何操作该地图的特定部分的 svg dom（就像我单击 a 中的子区域一样）能够获取该区域的数据）。这可能吗 ？操作 svg 的不同部分，如果是的话，我们将不胜感激有关如何操作的提示/指针。
谢谢！
PS：对于投反对票的人，请解释您的反对票。
编辑：添加有关研究的信息。事实证明，当我走到另一边并使用 jvectormap 并得到我需要的东西并回来查看这个之后；我犯的错误是 onClick() 与 onclick() ( ..argh )。无论如何，在此处添加详细信息以表明它确实有效，但是我无法调整图像的尺寸以及我将在下面发布的解决方案的替代方案。PS：我使用 SVG 的经验是 2 天，所以根据我从其他解决方案中操作图像的学习，我已经有了正确的 svg。也许 @robert-longson 可以解释 inkscape 的 svg 输出与svg-edit的 svg 输出之间的区别。
前提条件：
- 使用 inkscape 将 pdf 转换为 svg
- 选择节点，分解以将文本转换为路径（我之前没有这样做）。
这主要是针对 b) 部分，我添加了一个 onclick 事件并将我感兴趣的区域涂成红色。因此，如果我按原样从浏览器加载 svg（并加载 jquery），那么单击所选区域时它会按预期工作。
现在，如果我将 svg 作为图像加载，它就不起作用（这是我放弃的地方，因为我一开始就没有我的地区，并且无法访问 svg dom ..duh！）。正确的方法似乎是使用对象标签加载它。
现在，如果我尝试使用对象标签通过 html 加载图像，它就可以工作。
推荐指数
解决办法
查看次数