小编Eri*_*röm的帖子
使用HTML中的JavaScript动态创建SVG元素
我想在HTML页面内创建一个矩形,然后在该矩形上写一些文本.我还需要该文本作为超链接.这就是我做的,但它不起作用:
<!DOCTYPE html>
<html>
<body>
<script>
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('x',5);
rect.setAttribute('y',5);
rect.setAttribute('width',500);
rect.setAttribute('height',500);
rect.setAttribute('fill','#95B3D7');
svg.appendChild(rect);
document.body.appendChild(svg);
var h=document.createElement('a');
var t=document.createTextNode('Hello World');
h.appendChild(t);
document.body.appendChild(h);
</script>
</body>
</html>
你能帮帮忙吗？谢谢.
推荐指数
解决办法
查看次数
宽度/高度的SVG在IE9/10/11上无法缩放
有一个与IE 9/10/11:如果你有一个SVG文件,其中一个已知的问题<svg>元素指定的宽度和高度,然后使用缩放SVG图像width和height一个属性<img>标签,IE不正确缩放图像.
我遇到过这个问题.我有一系列SVG标志图标.对于US标志图标,SVG对象写为:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">
<!-- elements to draw flag .. -->
</svg>
我将SVG插入带有<img>标记的HTML文档中,并将其缩小到20x15:
在Chrome 39上,SVG正确呈现如下:
但在IE10上,它呈现如下:
所以,这里似乎发生的事情是,即使IE10将<img>元素的大小调整为20x15,它也不会缩小SVG的大小 - 所以我们最终只能看到标志图标的左上角,它看起来像一个纯蓝色的盒子.
好的......所以这似乎是一个已知问题,有文档化的解决方案.一种解决方案是简单地删除SVG文件中的所有width和height属性.这似乎有点危险,因为我不想搞砸实际的设计.如果你有很多SVG文件,这也有点麻烦 - 需要更多脚本来处理文件.
一个更好的解决方案是使用CSS专门针对IE10中的SVG元素,显然可以使用供应商特定的媒体查询:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
好的,但我不明白这个解决方案.当我尝试上述操作时,IE10只是扩展了SVG的大小来填充整个父容器,这不是我想要的.好吧,也许我可以通过将SVG宽度设置为100%来强制IE扩展SVG,但随后约束父容器的大小.所以我把它包裹<img>在宽度和高度为20x15的DIV中.但是......这只会导致与以前相同的问题:容器DIV固定为20x15,但SVG不会缩小 - 所以我们最终得到的是标志的左上角,如前所述:
......所以,我可能只是不了解这个解决方案.如何让IE10/11将标志图标缩小到20x15？
推荐指数
解决办法
查看次数
使用<use>元素时,SVG单击事件不会触发/冒泡
我遇到了一个有趣的错误(？),如果您使用<use>作为链接的一部分(例如图标)嵌入SVG - 图标本身不会在jQuery中注册click事件,但单击文本会.我认为这是由于SVG事件没有冒泡？
如果直接嵌入SVG,无论是否单击文本或图标,链接都会触发.
我在这里可以看到一个简单的测试用例: SVG <use> bug测试用例.
推荐指数
解决办法
查看次数
如何降低svg过滤器中alpha层的不透明度？
我正在尝试创建一个徽标作为SVG.我从Illustrator导出文件.徽标上有一个投影.我正在查看XML,我找到了过滤器节点
<filter filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2">
<feGaussianBlur stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur>
<feOffset result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
有没有办法改变offsetBlurredAlpha生成的alpha？我不希望它以纯黑色开始我希望它以50%黑色开始,以便阴影效果在物体周围足够轻.
推荐指数
解决办法
查看次数
命中测试SVG形状？
已经实现了SVG规范(Firefox等)部分的浏览器免费为我们进行了测试 - 如果我在SVG对象上附加了一个mousedown监听器,我会在点击形状时收到通知.这太棒了,特别是对于复杂的多边形形状.
我想知道是否有一种方法可以利用这个功能进行更多点击测试.我想知道给定的矩形是否与我的任何SVG形状相交.
例如,我向我的元素添加了3个复杂多边形.现在我想知道矩形(40,40,100,100)是否与它们中的任何一个相交.有没有人知道我怎么可能挂钩已经很好的命中测试支持,而不是自己添加所有这些代码？
谢谢
推荐指数
解决办法
查看次数
跨浏览器SVG preserveAspectRatio
我正在尝试在标签内部放置一个SVG图形,该<img />标签适合(没有裁剪)标签内保留的纵横比.我在Inkscape中创建了SVG.除了Internet Explorer 9之外,它在所有浏览器上都按预期工作.
为了使它在运行IE 9,我不得不添加viewBox="0 0 580 220"和preserveAspectRatio="xMidYMid meet"并删除width="580"和height="220" SVG属性.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
这似乎无处不在,直到我在Webkit上尝试它,<img />标签在垂直方向上被拉伸,尽管SVG的长宽比确实得到了保留.
当我放回width="580"和height="220"属性时,它适用于Webkit,但在IE 9上,aspectr比率丢失了.
是否有针对此行为的跨浏览器解决方案？
推荐指数
解决办法
查看次数
如何使SVG的透明部分可点击？
我有一个SVG使用:悬停改变颜色.它只适用于我将鼠标悬停在SVG的实体部分上,而不是透明部分.我想知道如何让SVG与鼠标悬停在整个SVG上的任何地方进行交互.这一点的目的是使SVG成为链接,并且链接只能在SVG的某些部分上单击.我不仅想要一个解决这个特定实例的解决方案,而是一个适用于许多实例的解决方案(如果我想要SVG的不同部分可点击.)我的SVG中的元素直接连接到CSS并与<g>标签分组对可点击元素进行分组.
编辑:SVG位于对象标记中
SVG
<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3036" version="1.1" inkscape:version="0.48.2 r9819" width="58" height="58">
<g class="test">
<path d="M 8.1 32.8 C 7.1 30.1 0.3 -4.6 11.1 4.9 21.9 14.5 15.9 12.8 29 12.8 42.1 12.9 36.1 14.6 46.9 5.1 57.7 -4.5 50.9 30.3 49.9 32.9 48.9 35.6 37.6 54.8 29 54.7 20.4 54.6 9.1 35.4 8.1 32.8 z" id="path3119" inkscape:connector-curvature="0" sodipodi:nodetypes="zzzzzzz" class="wolf"/>
<path d="M 31.5 23.3 46.6 21" id="path5212" inkscape:connector-curvature="0" sodipodi:nodetypes="cc" class="eyes"/> …推荐指数
解决办法
查看次数
如何动画书法文字就好像是用手写的
我正在寻找一些方向,不一定是代码.
我想用SVG文字拼出我的名字.
到目前为止,我已经能够放置它并允许它为绘画动画,但它不会以线性书写方式发生.
<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text class="path" xml:space="preserve" text-anchor="middle" font-family="pharmount" font-size="100" id="svg_1" y="230" x="300" stroke-width="2" stroke="#000000" fill="#000000">Martavis Parker</text>
</svg>
任何想法我怎么能这样做,以便名称写作,就像你实际上写在纸上？
推荐指数
解决办法
查看次数
两个SVG元素触摸时的事件
SVG中是否可以使用任何方法调用偶数两个特定元素？或者我是否需要编写很长的代码,并弄清楚它们的边界是否与复杂的数学接触？
推荐指数
解决办法
查看次数
在SVG中进行Ajax更新会破坏getBBox,有没有解决方法？
我有一个带有一些复杂图表的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 ×10
html ×4
css ×3
javascript ×3
ajax ×1
blink ×1
bounding-box ×1
click ×1
clickable ×1
dom ×1
firefox ×1
hittest ×1
html5 ×1
intersection ×1
jquery ×1
svg-filters ×1
transparency ×1
xml ×1