对于我的项目我正在使用Highcharts,这个样式是由一些Javascript定义的,我想知道是否有可能调整SVG或父容器的大小?
这是我的代码:
<div id="beteiligungs_chart">
<div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 1706px; height: 400px; text-align: left; line-height: normal; z-index: 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; cursor: auto;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1706" height="400">
<defs>
<clipPath id="highcharts-1">
<rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"></rect>
</clipPath>
<clipPath id="highcharts-2">
<rect fill="none" x="0" y="0" width="1706" height="400"></rect>
</clipPath>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-3">
<stop offset="0" stop-color="rgb(54,93,150)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(54,93,150)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-4">
<stop offset="0" stop-color="rgb(8,71,153)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(8,71,153)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-5">
<stop offset="0" stop-color="rgb(80,139,28)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(80,139,28)" stop-opacity="1"></stop>
</radialGradient>
<radialGradient cx="853" cy="160" r="140" gradientUnits="userSpaceOnUse" id="highcharts-6">
<stop offset="0" stop-color="rgb(25,125,31)" stop-opacity="1"></stop>
<stop offset="1" stop-color="rgb(25,125,31)" stop-opacity="1"></stop>
</radialGradient>
</defs>
<rect rx="5" ry="5" fill="rgb(0,0,0)" x="0" y="0" width="1706" height="400" stroke-width="0.000001" fill-opacity="0"></rect>
<g class="highcharts-series-group" zIndex="3"></g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-shadow" zIndex="4">
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="5" stroke-linejoin="round" isShadow="true" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></path>
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="3" stroke-linejoin="round" isShadow="true" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></path>
<path fill="none" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="black" stroke-width="1" stroke-linejoin="round" isShadow="true" stroke-opacity="0.15" transform="translate(1, 1)"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-3)" d="M 852.9796326796305 100.00000207413872 A 100 100 0 1 1 852.9797326796285 299.9999979461786 L 853 200 A 0 0 0 1 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-4)" d="M 852.9796326796305 299.9999979258613 A 100 100 0 0 1 753.0499037961571 203.1588397937432 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-5)" d="M 753.0499006373673 203.15873984364538 A 100 100 0 0 1 846.7650487338601 100.19456235901343 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-point" zIndex="5">
<path fill="url(http://gw.lo/print/5132#highcharts-6)" d="M 846.7651485393009 100.19455612411205 A 100 100 0 0 1 852.9610019625195 100.00000760423492 L 853 200 A 0 0 0 0 0 853 200 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"></path>
</g>
<g class="highcharts-legend" zIndex="7">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7" stroke-width="1" stroke="#909090" visibility="hidden"></rect>
<g zIndex="1" clip-path="url(http://gw.lo/print/5132#highcharts-1)">
<g></g>
</g>
</g>
<g class="highcharts-tooltip" zIndex="8" style="padding:0;white-space:nowrap;" visibility="hidden">
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"></rect>
<rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="10" height="10" stroke-width="2" fill-opacity="0.85"></rect>
<text x="5" y="18" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" zIndex="1"></text>
</g>
<g class="highcharts-tracker" zIndex="9"></g>
</svg>
</div>
我尝试设置每个元素的样式,但它不起作用。例如:我试图将容器#beteiligungs-chart的高度和宽度设置为500px - 检查员显示一个框但是svg不会移动。
我错过了什么吗?
如果有人可以看看我的问题,那会很棒:) 谢谢!
的Morten