Question

有没有办法插入像

这样的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”。任何建议将不胜感激

--------------- EDIT --------------- 我想出了这个

<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的组时我得到此错误

错误：属性变换的值无效=“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错误：属性变换的值无效=“translate（NaN，NaN）”u @ d3.v3.min.js：1 d3.v3.min.js：1错误：属性变换的值无效=“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错误：属性变换的值无效=“translate（NaN，NaN）”u @ d3.v3.min.js：1 d3.v3.min.js：1错误：属性变换的值无效=“translate（NaN，NaN）”u @ d3.v3.min.js：1 d3.v3.min.js：4错误：属性变换的值无效=“translate（NaN，0）”ta.transform @ d3.v3.min.js：4 http://localhost:8080/favicon.ico无法加载资源：服务器响应状态为404（未找到） 2d3.v3.min.js：1错误：属性变换的值无效=“translate（NaN，0）”u @ d3.v3.min.js：1 12d3.v3.min.js：1错误：属性变换的值无效=“translate（NaN，0）”

Answer 1

这项工作但是没有更好的解决方案吗？

 <g>
 <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)"/>
 <foreignobject x="375.66666" y="255.66667" width="180" height="180">
 <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>
<svg id="pwcwu" width="150" height="200"></svg>
    <script type="text/javascript">
var config1 = liquidFillGaugeDefaultSettings();
    config1.circleColor = "#ff0000";
    config1.textColor = "#FF4444";
    config1.waveTextColor = "#FFAAAA";
    config1.waveColor = "#FFDDDD";
    config1.circleThickness = 0.2;
    config1.textVertPosition = 0.2;
    config1.waveAnimateTime = 1000;
    loadLiquidFillGauge("pwcwu", #{hmiView.pwcwu}, config1);
    </script>
    </foreignobject>
    </g>

将js创建的svg对象插入现有的svg

1 个答案: