我想动态创建一个textPath,所以我写了这个:
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
function appendSVG(item, tag, attrs) {
var el = document.getElementById(item);
el.appendChild(makeSVG(tag, attrs));
}
function TEST() {
appendSVG('pannel', 'path', {'id':'PID', 'd': 'M 0 0 L 100 100', 'stroke': '#000000' })
appendSVG('pannel', 'text', { 'id': 'TID', 'x': '5', 'fill': '#000000' })
appendSVG('TID', 'textPath', { 'xlink:href': '#PID', 'id':'TPath' })
$('#TPath').append('TEXT');
}
我在页面上有一个SVG元素"面板".问题是 - 它不起作用
用html文件编写的相同代码可以正常工作.
你可以看到我在这里谈论的例子
(按"测试"按钮创建与顶部相同的svg(除了ids =)))
我正在尝试更正以下代码：
import svgwrite
dwg = svgwrite.Drawing('test.svg', profile='tiny')
dwg.add(dwg.circle((10, 0), 20 , fill='rgb(0,0,255)', id='rrr', class='#t'))
dwg.save()
我收到以下错误：
dwg.add(dwg.circle((10, 0), 20 , fill='rgb(0,0,255)', id='rrr', class='#t'))
^
SyntaxError: invalid syntax
这是为什么？显然 svgwrite 无法向元素添加类属性
我创建了一个带有几个矩形元素的内联 svg，并在 css 中为所有元素设置了相同的颜色。我给了他们每个人一个 id，现在想用普通的 javascript 操作它们以更改每个矩形的颜色。我的 javascript 代码确实验证正确，我可以在控制台中看到矩形被选中，但它们的颜色没有改变。关于我做错了什么以及如何解决它的任何建议？提前致谢！我的 html 代码示例：
<rect id="rect1" width="40" height="230" x="20" y="170" rx="10"/>
<rect id="rect2" width="40" height="300" x="60" y="100" rx="10"/>
我的javascript代码：
var rect1 = document.getElementById("rect1");
console.log(rect1);
rect1.setAttribute("style", "color: red");
我有一个 svg，我需要用渐变填充它，css 是由脚本添加的，如果你使用单一的 RGB 颜色，它都可以正常工作，但是使用渐变，SVG 会导致白色背景。
脚本后的结果代码：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
id="Livello_1" x="0px" y="0px" viewBox="0 0 70 70"
style="enable-background:new 0 0 70 70;width: 50px; height: 50px;"
xml:space="preserve">
<defs>
<lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
</lineargradient>
</defs>
<path class="st0" d="......" style="fill: url("#grC29M")">
</svg>
谢谢！
我目前正在使用 JavaScript 的 SVG 元素。
这是我的场景。
我有一个 svg 元素，其中有两个像这样的文本元素
<svg>
<g transform = "translate(0, 20)">
<text style="font-size: 0.5em;" x="0" y="-4"> text </text>
<text style="font-size: 0.5em;" x="70" y="-4"> value </text>
</g>
<svg>
看起来像这样很好
文本值
我使用了 font-size 0.5em，因为我希望在调整 svg 大小时调整文本大小。（通过使用 jquery 可调整大小）它工作正常，但问题是当我调整 svg 大小时，文本之间的间距会减小，并且在某些情况下由于固定的 x 和 y 属性，文本变得太大以至于两个文本彼此重叠。
有没有办法避免这个问题。一种可以保持两个文本之间的间距不变或者文本可以相对放置的方法。
SVG 元素<line>、<circle>、<rect>、<text>和<image>允许基于视口按 x 和 y 进行定位。此外，它们也可以相对定位。有没有什么办法可以做到这一点，而<polygon>不是将它包装在一个<svg>? 最接近的替代品<polygon>，<path>也有这个...问题。
我想使用ReactJS 创建d3强制布局图。
我已经使用React + d3创建了其他图形，例如饼图，折线图，直方图。现在，我想知道如何构建像d3力布局这样的svg图形，其中涉及物理和用户交互。
这是我要构建的示例http://bl.ocks.org/mbostock/4062045
假设我有一个 SVG 元素：
<svg id="myMap" viewBox="0 0 200 200"></svg>
我如何获得 myMap 的 viewBox 的特定值？举一个简单的例子：如何获取 myMap 的 viewBox 属性的“x”值？（对于上面的示例，x 值是第一个零 (0)）。
以下是我尝试过的一些语法变体：
<script>
var myMap = Snap("#myMap");
alert(myMap.attr("viewBox"));//dislays [object Object]
alert(myMap.attr("viewBox.vbx"));//also dislays [object Object]
alert(myMap.attr("viewBox.x"));//also dislays [object Object]
</script>
以上所有示例都在警报框中显示 [object Object]。
我需要视口的 x、y、宽度和高度的适当浮点值来实现地图中的放大和缩小功能。
我找不到这个问题的正确解决方案，所以我决定写一个新问题。
我什至不确定这是否可能，但我希望如此。
这是浏览器提供的 HTML。我从浏览器中的“元素”选项卡复制它。
<svg width="960" height="728" style="margin-left: 0px;">
<g transform="translate(0,24)" style="shape-rendering: crispEdges;">
<g class="depth">
<g>
<g>
<rect class="child" x="0" y="0" width="960" height="704" style="fill: rgb(192, 192, 192);">1.1.1.
<div class="jstree">
<div>TestContent</div>
</div>
</rect>
</g>
</g>
</g>
</g>
（我用 JS 创建一切）。
我的问题是，我在 rect 标签内创建这个 div，但这个 div 及其内容不会出现在屏幕上的矩形内。
我想知道是否可以让它出现，如果是如何？
我现在正在学习 SVG，并陷入了径向渐变主题，即精确移动径向渐变中心。比方说，我有 2 个渐变示例（可供使用的 codepen 片段）。一个基本的（完美运行）：
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye)"/>
</svg>fx以及我尝试应用和fy属性来移动渐变焦点的示例：
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye2" cx="50%" cy="50%" r="10%" fx=".2" fy=".2" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye2)"/>
</svg>在这里，它以某种方式只是切割了一块形状，而不是仅仅移动中心点。
您能否解释一下我在这里做错了什么以及为什么它以如此奇怪的方式工作？