【发布时间】：2015-06-02 07:16:38
【问题描述】：
有没有办法像
一样插入 svg 对象<svg id="fillgauge2" width="19%" height="200"></svg>
<script language="JavaScript">
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#FF7777";
config1.textColor = "#FF4444";
config1.waveTextColor = "#FFAAAA";
config1.waveColor = "#FFDDDD";
config1.circleThickness = 0.2;
config1.textVertPosition = 0.2;
config1.waveAnimateTime = 1000;
loadLiquidFillGauge("fillgauge2", 67, config1);
</script>
进入另一个 svg 元素，如
<svg
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"
width="100%"
height="100%"
id="svg4684"
version="1.1"
viewBox="0 0 1600 1200"><rect
ry="191.66667"
rx="23.348978"
y="136.66667"
x="326.66666"
height="383.33334"
width="246.66667"
id="wymiennikCwu"
fill="url(#wymiennikCwuGradient)"
style="opacity:1;stroke:#868787;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
onclick="getDetails(wymiennikCwu)">
<object id="fillgauge2" width="19%" height="200"></object>
</rect></svg>
我想在“rect”中添加“fillgauge2”。 任何建议将不胜感激
---------------编辑--------------- 我想出了这个
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="resources/js/liquidFillGauge.js"></script>
<style>
.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
</style>
</head>
<body>
<svg
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"
version="1.1"
id="svg2"
viewBox="0 0 744.09448819 1052.3622047"
>
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" transform="translate(110,110) rotate(10)">
<rect
ry="311.772"
rx="37.883099"
y="146.64792"
x="182.85715"
height="360"
width="320"
id="kwadrat"
style="opacity:1;fill:#f9f9f9;fill-opacity:1;stroke:#3c2a2a;stroke-width:20;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
<script type="text/javascript">
function code() {
var bodySelection = d3.select("body");
var svgSelection = bodySelection.insert("svg")
.attr("width", "100")
.attr("height", "100")
.attr("overflow","visible")
.attr("id", "fillgauge2");
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#FF7777";
config1.textColor = "#FF4444";
config1.waveTextColor = "#FFAAAA";
config1.waveColor = "#FFDDDD";
config1.circleThickness = 0.2;
config1.textVertPosition = 0.2;
config1.waveAnimateTime = 1000;
loadLiquidFillGauge("fillgauge2", 67, config1);
}
window.onload = code;
</script>
</body>
</html>
这在插入正文时工作正常，但是当我尝试将其插入到 rect 所在的组时，我收到此错误
错误：属性 transform="translate(NaN,NaN)"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 d="M0,NaNANaN,NaN 0 1,1 0,NaNANaN,NaN 0 1,1 0,NaNZ"o @ d3.v3.min.js 的值无效： 1 d3.v3.min.js:1 错误：属性 transform="translate(NaN,NaN)"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 transform="translate(NaN,NaN)"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性值无效 d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLN aN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN, NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNZ"o @ d3.v3.min.js: 1 d3.v3.min.js:1 错误：属性 cx="NaN"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 cy="NaN"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 r="NaN"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 transform="translate(NaN,NaN)"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:1 错误：属性 transform="translate(NaN,NaN)"u @ d3.v3.min.js:1 的值无效 d3.v3.min.js:4 错误：属性 transform="translate(NaN,0)"ta.transform @ d3.v3.min.js:4 的值无效 http://localhost:8080/favicon.ico 加载资源失败：服务器响应状态为 404（未找到） 2d3.v3.min.js:1 错误：属性 transform="translate(NaN,0)"u @ d3.v3.min.js:1 的值无效 12d3.v3.min.js:1 错误：属性 transform="translate(NaN,0)" 的值无效
【问题讨论】：
-
在 SVG 中，
rectelement 不得包含动画元素或描述性元素以外的任何元素。这意味着您上面引用的代码和您想要的结果都不是有效的 SVG 文档。要让元素在视觉上包含 svg 术语中的其他元素，您需要将它们呈现在彼此之上。习惯使用g元素对它们进行分组以作用于一组链接元素。 -
而且，是的，有 JavaScript 解决方案。请调整您的问题以指定您真正想要的输出，并且应该很容易找到满足您需求的解决方案。
-
正如你所说的，我希望在“rect”元素（覆盖内部）顶部有“fillgauge2”，但仍保持填充渐变作为背景。 “rect”应该在视觉上包含“fillgauge2”。
-
那么fillgauge2需要是rect的后续兄弟
标签： javascript svg