我以前从未见过 实际使用过的<base>HTML标签.它的使用存在缺陷,这意味着我应该避免它吗？
事实上我从来没有注意到它在现代生产网站(或任何网站)上的使用让我对它持怀疑态度,尽管看起来它可能有用于简化我网站链接的有用应用程序.
使用基本标签几周后,我最终找到了使用基本标签的一些主要问题,这使得它比最初出现时更不可取.从本质上讲,变化href='#topic'和href=''基本标签下是非常有它们的默认行为不兼容,并可以从默认行为,这种变化很容易使第三方库的控制范围之外的非常不可靠的 以意想不到的方式,因为它们在逻辑上依赖于默认行为.通常,这些更改是微妙的,并且在处理大型代码库时会导致不那么明显的问题.我已经创建了一个回答,详细说明了我在下面遇到的问题.因此,在您进行广泛部署之前,请自行测试链接结果<base>,这是我的新建议!
请看看这支笔:
http://codepen.io/troywarr/pen/VYmbaa
我在这里做的是:
<symbol>)<linearGradient>)<use>元素来引用我创建的SVG符号external,它引用在定义的线性梯度这个外部
.svg文件(右键点击和查看源)internal,它引用了本地HTML中定义的线性渐变(我相信,它实际上与外部文件中的相同)因为我已将internal类应用于<svg>HTML示例底部的元素,所以应用渐变,呈现蓝色渐变复选标记.这就是我所追求的.
但是,如果您在HTML示例中切换internal类external,则不再显示复选标记:
http://codepen.io/troywarr/pen/vEymKX
当我观看Chrome Inspector的"网络"标签时,我看不到浏览器尝试加载SVG文件.我的语法有问题,还是其他的东西在这里？
根据我发现的一些参考资料,至少看起来我正在做这件事:
但是,到目前为止我没有尝试过任何东西,这使我能够引用外部.svg文件中定义的线性渐变.
谢谢你的帮助!
Chrome似乎没有<use>在内联svg中显示元素.以下是一个示例(下面的代码或在http://www.bobwyttenbach.com/chromeuse.html上查看):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test1">
<circle cx="100" cy="100" r="50" fill="red"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
</g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>
红色圆圈不会出现在内联svg中,但会在通过对象标记链接相同的svg时出现.Safari,Firefox,Opera和Internet …
我在javascript中创建了一个标记,如下所示:
var marker = document.createElementNS(SVG.ns, "marker");
marker.setAttribute("markerWidth", "3");
marker.setAttribute("markerHeight", "3");
marker.setAttribute("id", "mkrCircle");
marker.setAttribute("viewBox", "0 0 12 12");
marker.setAttribute("orient", "auto");
marker.setAttribute("stroke", "#000000");
marker.setAttribute("stroke-width", "2");
marker.setAttribute("fill", "#ffffff");
marker.setAttribute("refX", "12");
marker.setAttribute("refY", "6");
var mkrContent = document.createElementNS(SVG.ns, "circle");
mkrContent.setAttribute("r", "5");
mkrContent.setAttribute("cx", "6");
mkrContent.setAttribute("cy", "6");
marker.appendChild(mkrContent);
defs.appendChild(marker); // <-- defs is svg defs element
我用它作为一条路:
<path marker-mid="url(#mkrCircle)" d="M0,0L100,100" stroke-width="3"></path>
但它根本没有出现在路径上,为什么？
提前致谢
我在Illustrator中创建了一个简单的多边形,然后在图像前面创建了一个剪切路径(蒙版).我已将其导出为SVG文件,并在Chrome和Safari中完美呈现.
但是,当我使用SVG数据创建HTML文件时,它在Chrome中完美呈现,而不是 Safari 6.0.2.
不太清楚我可能做错了什么; 我已经创建了SVG示例(个人站点)和HTML(jsfiddle上的示例)的示例.
svg ×4
html ×2
base-tag ×1
clipping ×1
contextpath ×1
gradient ×1
javascript ×1
marker ×1
safari ×1
