Tag: svg

将背景图像（.png）添加到SVG圆形状中

这可能吗？ 以下是我的尝试，但它完全用黑色填充圆圈。 <svg id='vizMenu' width="700" height="660"> <defs> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> <feOffset dx="0.5" dy="0.8" result="offsetblur"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/> <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/> <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/> </svg>

SVG是否支持embedded位图图像？

SVG图像是纯vector图像还是可以将位图图像组合成SVG图像？ 如何应用变换位图图像（透视，映射等）？ 编辑 ：图像可能通过链接引用包含在SVG中。 请参阅http://www.w3.org/TR/SVG/struct.html#ImageElement 。 我的问题是事实上，如果位图图像可能包含在svg内，以便svg图像将自我包含。 否则，每当显示svg图像时，都必须遵循链接并下载图像。 显然，.svg文件只是xml文件。

如何在D3图表的标签中包含换行符？

我使用D3来生成条形图（我修改了这个例子中的代码）。 我在x轴上使用的标签每个都是几个字，因为这使得所有的标签重叠，我需要跨越这些标签。 （如果我可以用换行符replace每个标签中的所有空格，那就没问题了。） 我最初试图通过在标签的<text>元素上用空格replace空格（ ）和设置xml:space="preserve" 。 不幸的是，事实certificate，SVG不尊重这个属性。 接下来，我尝试将每个单词包装在一个<tspan> ，以便以后可以使用。 我通过这个函数传递了每个标签： function (text) { return '<tspan>' + text.replace(/ /g, '</tspan><tspan>') + '</tspan>'; } 但是这只是将文字<tspan>放入输出中。 如何将我的文本标签包裹在tspan （或者做其他事情），以便我的标签不重叠？

用SVG的圆弧path绘制圆图

下面的SVGpath可以画出99.99％的圆：（在http://jsfiddle.net/DFhUF/46/上试一下，看看你是否看到4个弧或者只有2个，但是请注意，如果它是IE，就会呈现在VML中，不是SVG，但有类似的问题） M 100 100 a 50 50 0 1 0 0.00001 0 但是当它是99.99999999％的一个圆时，什么都不会显示出来？ M 100 800 a 50 50 0 1 0 0.00000001 0 这与100％的圆相同（它仍然是一个圆弧，是不是，只是一个非常完整的圆弧） M 100 800 a 50 50 0 1 0 0 0 这怎么解决？ 原因是我用一个函数来绘制一个弧的百分比，如果我需要用“特殊情况”一个99.9999％或100％的弧来使用这个圆的函数，那就太傻了。 同样，使用RaphaelJS的jsfiddle的testing用例在http://jsfiddle.net/DFhUF/46/ （如果是IE 8上的VML，即使是第二个圆也不会显示…您必须将其更改为0.01） 更新： 这是因为我在我们的系统中渲染了一个分数的弧，所以3.3分得到1/3的一个圆。 0.5圈半圈，9.9圈圈达到99％。 但是如果我们的系统中有9.99的分数呢？ 我是否要检查它是否接近圆的99.999％，并相应地使用arc函数或circle函数？ 那么9.9987的分数呢？ 哪一个使用？ 想要知道什么样的分数会映射到一个“太圆的圆圈”并切换到一个圆圈函数，当它是一个圆的“99.9％”或9.9987的分数时，那么使用弧函数是荒谬的。

Angular和SVGfilter

在AngularJS中使用SVG时，我遇到了一个奇怪的行为。 我正在使用$routeProvider服务来configuration我的路线。 当我把这个简单的SVG放在我的模板里时，一切都很好： <div id="my-template"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect fill="red" height="200" width="300" /> </svg> // … </div> 但是当我添加一个filter，例如这个代码： <div id="my-template"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blurred"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <rect style="filter:url(#blurred)" fill="red" height="200" width="300" /> </svg> </div> 然后： 它在我的主页上工作 。 使用Firefox时 ，SVG 在其他页面上不再可见，但它仍然留下原来的空间。 使用Chrome ，SVG是可见的，但根本不模糊。 当我手动删除（使用Firebug） filter样式时，SVG再次可见。 这里是路由configuration： $routeProvider .when('/site/other-page/', { templateUrl : 'view/Site/OtherPage.html', […]

如何计算弧（圆）的SVGpath

给定以（200,200），半径25为中心的圆，我如何绘制270度到135度的弧线和270度到45度的弧线？ 0度表示在x轴上（右侧）（意思是3点钟位置），270度表示12点钟位置，90表示6点钟位置 更一般地说，圆的一部分是什么是一个弧的path x, y, r, d1, d2, direction 含义 center (x,y), radius r, degree_start, degree_end, direction

SVG在IE中不能正确缩放 – 有额外的空间

我决定切换到我的项目之一的svg符号 – 但需要他们的响应 。 主要的想法是不要有多个http请求，所以我想将所有的SVG合并成一个SVG，定义符号并使用它们如下： <svg style="display:none;"> <defs> <symbol id="mys"> <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3 c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9 C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7 l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5 c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1 c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8 c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6 s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9 s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3 S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/> </symbol> </defs> </svg> <div style="position:relative;width:100%;background:blue;"> <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;"> <use xlink:href="#mys"></use> <svg> </div> 这里是一个jsfiddle，检查IE中的不同行为（我检查了11，但读了9也有多个问题）： http : //jsfiddle.net/ws472q71/ 对于我的生活，我无法得到这个工作正常。 上述代码在Firefox和Chrome中正常工作，但在IE中失败。 我读了关于IE的问题，但是我找不到任何可行的东西。 我究竟做错了什么？ […]

SVG阴影使用css3

是否有可能使用css3为svg元素设置阴影，如 box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 我看到一些关于使用滤镜效果创build阴影的评论。 有没有单独使用CSS的例子。 下面是一个工作代码，正确应用cusor风格，但没有阴影效果。 请帮我用最less的代码获得阴影效果。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css" media="screen"> svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } </style> </head> <body> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <svg […]

在SVG文本中自动换行

我想在SVG中显示一个<text> ，就像HTML文本填充<div>元素一样，自动换行到容器<rect> 。 有没有办法做到这一点？ 我不想通过使用<tspan>来温和地定位行。

用PHP将SVG图像转换为PNG

我正在开发一个Web项目，其中包含一个dynamic生成的美国地图，它根据一组数据着色不同的状态。 这个SVG文件给了我一个美国的空白地图，很容易改变每个国家的颜色。 难度在于IE浏览器不支持SVG，所以为了让我使用svg提供的方便的语法，我需要把它转换成JPG格式。 理想情况下，我只想用GD2库来做到这一点，但也可以使用ImageMagick。 我完全不知道如何做到这一点。 我们将考虑任何能够dynamic改变美国地图上的州的颜色的解决scheme。 关键是可以很容易地改变飞行中的颜色，并且它是跨浏览器的。 请仅使用PHP / Apache解决scheme。