Javascript SVG文件脚本在html中不起作用
我想做的是创建一个svg文件,其中有两个圆柱体,一个在另一个内,表示储罐和液体。我想让里面的圆筒根据液体的百分比移动。我已经实现了这一点,代码在js fiddle中运行良好。但是,当我试图将svg作为文件集成到html中时,内部圆柱体不起作用 请查找以下代码: JSFIDLE中使用的代码: pathSegList不久前从Chrome中删除。你不应该再使用它了。Chrome此举打破了网络,但他们还是做到了 此处有pathSegList的完整多边形填充:Javascript SVG文件脚本在html中不起作用,javascript,html,svg,svg.js,Javascript,Html,Svg,Svg.js,我想做的是创建一个svg文件,其中有两个圆柱体,一个在另一个内,表示储罐和液体。我想让里面的圆筒根据液体的百分比移动。我已经实现了这一点,代码在js fiddle中运行良好。但是,当我试图将svg作为文件集成到html中时,内部圆柱体不起作用 请查找以下代码: JSFIDLE中使用的代码: pathSegList不久前从Chrome中删除。你不应该再使用它了。Chrome此举打破了网络,但他们还是做到了 此处有pathSegList的完整多边形填充: 所以当你把它包括进来时,它应该重新开始工作了
所以当你把它包括进来时,它应该重新开始工作了hi..我试着用ie而不是chrome来运行代码,效果很好。但我希望它在两种浏览器中都能工作。有人能帮我吗?
<div class="progressBar">
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect height="402" width="582" y="-1" x="-1" fill="#fff" id="canvas_background"/>
</g>
<defs>
<style type="text/css">
<![CDATA[
.stop1 { stop-color: grey; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: grey; }
]]>
</style>
<linearGradient id="Gradient1">
<stop offset="0%" class="stop1"/>
<stop offset="50%" class="stop2"/>
<stop offset="100%" class="stop3"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<path d="m527,77.53519c0,33.2677 -102.30249,60.23117 -228.49918,60.23117m228.49918,-60.23117l0,0c0,33.2677 -102.30249,60.23117 -228.49918,60.23117c-126.19745,0 -228.50072,-26.96347 -228.50072,-60.23117m0,0l0,0c0,-33.28308 101.42944,-62.78519 227.62694,-62.78519c126.19666,0 229.37296,29.50211 229.37296,62.78519l0,240.97189c0,33.26648 -102.30249,60.24292 -228.49918,60.24292c-126.19745,0 -228.50072,-26.97644 -228.50072,-60.24292l0,-240.97189z" stroke-width="1.5" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="rgb(255, 215, 0)" id="svg_2"/>
<rect height="225" width="10" y="90.77" x="51.75" stroke-width="1.5" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#fff68f" id="svg_3"/>
<rect height="13.5" width="10" y="319.77" x="51.75" stroke-width="1.5" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#ff0000" id="svg_7"/>
<rect height="13.5" width="10" y="73.77" x="51.75" stroke-width="1.5" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#ff0000" id="svg_8"/>
<path d="m527,71.58089c0,34.05788 -102.75073,61.6671 -229.49994,61.6671m229.49994,-61.6671l0,0c0,34.05788 -102.75073,61.6671 -229.49994,61.6671c-126.74753,0 -229.50006,-27.60924 -229.50006,-61.6671m0,0l0,0c0,-34.0567 102.75255,-61.66643 229.50006,-61.66643c126.74921,0 229.49994,27.60972 229.49994,61.66643l0,246.66637c0,34.05798 -102.75073,61.66721 -229.49994,61.66721c-126.74753,0 -229.50006,-27.60922 -229.50006,-61.66721l0,-246.66637z" stroke-width="2" stroke-opacity="5.5" stroke="#000" fill-opacity="null" fill="url(#Gradient1)" id="svg_5"/>
<path d="m171.4028,276.6062l314.99991,0c-34.79343,0 -63.00003,103.42236 -63.00003,231c0,127.57776 28.2066,231 63.00003,231l-314.99991,0l0,0c-34.79411,0 -63.00003,-103.42224 -63.00003,-231c0,-127.57767 28.20592,-231 63.00003,-231z" transform="rotate(-90 297.403 507.606)" stroke-width="0.005" stroke-opacity="null" stroke="#000" fill-opacity="null" fill="#fff" id="svg_9"/>
</g>
<script><![CDATA[
var path = document.getElementById('svg_2');
var liqpercent=50;
var cal=100-liqpercent;
var segments = path.pathSegList;
segments.getItem(0).y = 77+(2.4*cal);
]]>
</script>
</svg>