我有一个带有一些复杂图表的SVG页面; 我正在尝试添加通过Ajax调用按需插入更多复杂性的代码.这主要是有效的,但插入的节点行为不正常.特别是getBBox()在某些元素上失败,在Firefox中,错误是这样的:
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost:1555/svg-scripts.js :: addBackground :: line 91" data: no]
问题似乎与这个问题有关:https: //bugzilla.mozilla.org/show_bug.cgi？format = manyple&id = 612118 但在我的情况下,对象肯定是渲染的,我可以看到它们.
任何见解或变通方法都表示赞赏.不幸的是,我不能轻易指出一个例子,因为这依赖于服务器交互.
为了渲染SVG我正在使用jQuery SVG插件.而且,现在我想为每个路径和多边形添加文本.在jsFiddle上,您可以看到插件生成的标记.
为了创建文本,我编写了以下代码:
var svgg = $("#rsr").svg('get');
var texts = svgg.createText();
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go ').
span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }).
string(' then we go down, then up again'));
在jsFiddle的代码中,您可以看到textpath标记存在,但它不可见.如何将文本添加到每个路径的中心？
谢谢.
我希望能够<defs>在页面上定义一次掩码,然后在多个<svg>元素中重用它.
例如:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="SvgjsClipPath1009">
<rect width="200%" height="80%" x="0" y="20%"></rect>
<rect width="200%" height="80%" x="0" y="20%"></rect>
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#SvgjsClipPath1009)">
<image class="Chevron-Image" xlink:href="http://placekitten.com/g/1200/1200" width="1200" height="1200" x="50%" y="50%"></image>
</g>
</svg>
目前,这在Chrome中无效.这样做是否有诀窍或所有SVG都必须是自包含的？
我目前正在将.dwg文件保存为.dxf,在Illustrator中打开,保存为.svg,然后使用Polymaps将其嵌入到html文档中.期望的结果是有一个事件平面图.平面图超过1,000,000平方英尺.所以我认为平铺是拥有可用于移动设备的东西的唯一方式(由于加载时间)
我无法找到有关如何从SVG文件创建切片的任何信息,然后将其与Polymaps一起使用.我对此并不熟悉,虽然我已经完整地阅读了Polymaps文档,但我不确定即使在使用了瓷砖之后我也能够实现.
我将非常感谢有关使用Polymaps的.svg创建切片的任何资源,以及有关使用Polymaps的更详细示例.
谢谢,
克里斯
我对svg很新,我必须用它执行任务,但我遇到了很多麻烦.
我有一个svg(例如一个地图),其中的区域由路径定义.
我的目标是触发onClick svg外部的一个函数来做一些事情(例如,通过ajax检索一些与所选区域相关的人数据,并在html页面的svg之外显示它们).
我无法做的是从svg中的元素触发svg外部定义的函数.
如果我添加svg内联,我可以这样做,但我需要使用embed标签使其与Adobe插件一起使用.有什么建议吗？提前致谢.
是否有可能实现这个梯度而不必首先定义它<defs>？
我正在开发一个网络地图,显示设备(交换机,路由器......)之间链路上的网络负载.我使用SVG绘制它,但我不想定义所有渐变,因为已经从后端系统向我提供了开始(上行链路)和结束(下行链路)颜色,并且可以通过我们的应用程序中的模板变量访问.
我希望使用内联样式,因为它更容易执行代码,因为我不必跟踪数千个链接引用并确保为每个链接指定正确的渐变,因为每个渐变将为'99 .9%'我在网络地图中绘制的每一行(链接加载)的时间都是唯一的
简单来说,我可以做一些事情: <line stroke=<linearGradient...？无需定义一个和引用它？像CSS中的样式:<span style='color: blue'> .. </span>
<svg width="1024" height="800">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
<stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
<stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
</linearGradient>
</defs>
<text x="50" y="50" fill="red">foo bar</text>a
<line stroke="url(#grad1)" x1="130.8757632890282"
y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />
</svg>
所以我有一个包含文本元素的 SVG 文件。例子：
<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>
当我为 iOS 中包含的某些内容（如 Helvetica 或 Futura）指定字体系列时，一切正常。但是，一旦我指定了通过 @font-face 包含的字体，它就无法在 iOS 上运行，而在桌面 Safari、Chrome、Firefox 和 Opera 上却可以。
否则@font-face 字体在整个页面中都可以正常工作，除了 SVG 部分。
尝试将 SVG 文件包含为<embed>,<object>和<img>，但没有帮助。有趣的是，当我尝试内联 SVG（即直接在 HTML 中使用 SVG 代码）时，字体还可以，但它不会从 SVG 文件中绘制任何其他内容。
我在 iOS 4.2 上。尝试了 SVG 1.1、1.1 Tiny、1.2 等，都一样。
请问这是一个错误还是我遗漏了什么？谢谢。
此处的示例 SVG 文件：http : //pastie.org/1637291
我的网站背景有一个大的SVG图形.在这里查看示例:http: //jsfiddle.net/aAwgU/4/embedded/result/
body{
background: url(http://www.thedavidcummings.com/images/html.svg) no-repeat fixed right;
background-size: auto 100%;
}
它在Chrome和Firefox中运行良好,但在Safari中导航页面并调整浏览器页面的大小非常慢,并且页面在我的iPhone上完全崩溃.这是webkit中的错误吗？
有没有办法让我的.svg更友好的WebKit？或者我应该使用图像？SVG是理想的,因为文件很小(只有7k).我能够制作的最小.png等值是150k.我想保持尺寸大,以便图像很好地扩展.
这可能是一个愚蠢的问题，但我今天才开始玩 SVG，并且遇到了一个问题。我不确定我是否只是以错误的方式思考它，或者我是否正在尝试做一些不适合工作的事情。
我想做的是创建一个 SVG 矩形，其高度是其宽度的 30%。我希望这个 SVG 在 内缩放<div>，但我似乎无法让它工作。
理想情况下，我希望能够设置 SVG 的最大高度和宽度以缩放到（在本例中为 1500x450）。
另外，我尽量不使用 JavaScript 来完成这项工作。
我正在尝试做一些看似相对简单的事情，但是经过大量的搜索和挑剔之后，我似乎无法使其工作。我有一个svg多边形，用于将图像裁剪成三角形。当前，它在引导列（包含标签）内，该列链接到锚点。这样做的问题是div（square）全部链接到锚点。
但是，我有一堆这些三角形邻接，因此我需要链接到锚点的区域被限制为仅包含多边形剪辑路径中的内容。
我试过了：
我怀疑这是实现我的目标的第三个选择的某种组合。
<div class="col-sm-4 portfolio-item dontwantpadding">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class='tri-up'>
<svg width="100%" height="100%" viewBox="0 0 100 87">
<clipPath id="clipTriangleUp">
<polygon points="0 87,100 87,50 0"/>
</clipPath>
<image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/1749x1510"/>
</svg>
</div>
</a>
</div>
我计划使svg路径从三角形过渡到圆，因此适合圆svg路径的东西是理想的。
任何帮助深表感谢！