在svg中呈现javascript

问题描述 投票:0回答:1

将js代码片段添加到svg文件中确实会在浏览器(Firefox)中呈现,但是当我将同一文件转换为某些输出格式(例如png或pdf等)时,javascript的部分不会呈现,也不会显示在输出文件。下面是我正在尝试做的事情(在path形状周围绘制一个填充的矩形):

<svg width="793.70081" height="1122.51965" version="1.1" id="toplevel"
    xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect id="rectG" x="0" y="0" width="50" height="50" fill="yellow" transform="translate(100 200) scale(0.1 -0.1) "/>    
  <path id="pathG" d="M390.01 151l73 -366c43.3333 10 78.1667 31.3333 104.5 64c26.3333 32.6667 39.5 70.3333 39.5 113c0 52 -18.3333 96.8333 -55 134.5c-36.6667 37.6667 -81.3333 56.5 -134 56.5c-9.33333 0 -18.6667 -0.666667 -28 -2zM472.01 861c-5.33333 32 -10 53 -14 63
c-9.33333 20 -25 30.6667 -47 32s-45 -22.6667 -69 -72c-22.6667 -44.6667 -38.6667 -93.6667 -48 -147c-0.666667 -4 -1 -10 -1 -18c0 -22 2.5 -52 7.5 -90s9.16667 -62.3333 12.5 -73l36 33c13.3333 5.33333 35.3333 30.3333 66 75c39.3333 58 59 113.333 59 166
c0 10.6667 -0.666667 21 -2 31zM351.01 251l-27 141c-10.6667 -8 -31.6667 -29 -63 -63c-31.3333 -34 -55.3333 -61.6667 -72 -83c-66.6667 -86 -100 -164 -100 -234c0 -23.3333 3.33333 -46.6667 10 -70c10 -32.6667 34.6667 -68 74 -106
c57.3333 -54.6667 121.667 -80.6667 193 -78c23.3333 0.666667 48.6667 5.66667 76 15l-76 378c-49.3333 -6.66667 -87.3333 -30.6667 -114 -72c-20 -31.3333 -30.6667 -65.3333 -32 -102c-1.33333 -40 21 -78.3333 67 -115c39.3333 -31.3333 70.3333 -47.3333 93 -48v-10
c-29.3333 3.33333 -63.6667 19 -103 47c-52.6667 37.3333 -84 81.3333 -94 132c-3.33333 15.3333 -5 31 -5 47c0 52 16 98.6667 48 140s73.6667 68.3333 125 81zM401.01 1077c26 0.666667 51.3333 -32.6667 76 -100c21.3333 -58.6667 33.6667 -115.333 37 -170
c4 -64.6667 -5.33333 -129 -28 -193c-29.3333 -82.6667 -77.3333 -150.667 -144 -204l30 -155c18 2.66667 35.3333 4 52 4c82 0 145.667 -31 191 -93c40 -54 58.3333 -117.333 55 -190c-2.66667 -58.6667 -22 -108.167 -58 -148.5s-83.3333 -67.5 -142 -81.5l41 -229
c2 -9.33333 3 -18.6667 3 -28c0 -46 -19.8333 -86.5 -59.5 -121.5s-82.8333 -52.5 -129.5 -52.5c-43.3333 0 -82.6667 18 -118 54c-32.6667 34 -49 69 -49 105c0 30.6667 11.5 57.3333 34.5 80s49.8333 33.6667 80.5 33c28.6667 -0.666667 53.3333 -10.5 74 -29.5
s31.3333 -42.5 32 -70.5c0.666667 -29.3333 -9 -54.8333 -29 -76.5s-45 -32.5 -75 -32.5c-5.33333 0 -10.6667 0.333333 -16 1c32.6667 -30 64.6667 -43.3333 96 -40c20 2 44.6667 13.3333 74 34c42.6667 30.6667 64 70 64 118c0 9.33333 -1 19 -3 29l-39 218
c-18 -4 -51.3333 -6.66667 -100 -8c-94 -2.66667 -176.167 31.5 -246.5 102.5c-70.3333 71 -105.167 155.167 -104.5 252.5c0 53.3333 25 119.333 75 198c36 56.6667 82.3333 116 139 178c46 50.6667 72.3333 77.3333 79 80c-12.6667 30.6667 -25.6667 96.6667 -39 198
c-1.33333 10.6667 -2 22 -2 34c0 65.3333 14.6667 131 44 197c31.3333 70.6667 66.3333 106.333 105 107z" transform="translate(100 200) scale(0.1 -0.1) "/>

<script type="text/javascript"><![CDATA[
var x = document.getElementById("pathG");

bb=x.getBBox();

var rect = document.getElementById("rectG");
rect.setAttribute('x', bb.x);
rect.setAttribute('y', bb.y);
rect.setAttribute('width', bb.width);
rect.setAttribute('height', bb.height);
]]></script>


</svg>

这在Firefox中显示:

enter image description here

但是在Inkscape中,或使用rsvg-convert或cairosvg之类的命令行工具将svg文件转换为pdf或png时,不显示矩形。有没有办法做到这一点?

javascript svg
1个回答
0
投票

[大多数SVG编辑器,查看器和转换器可能不会在SVG文档中执行JavaScript;他们希望使用静态XML文本文件。 (即使您将诸如图片或CSS背景图片之类的SVG加载到浏览器中,这也适用。)>

[如果您的SVG文档显示在浏览器中(作为文档,因此JS被解释为运行),则可以使用

从浏览器控制台中获取结果源代码。

copy(document.documentElement.outerHTML)

命令:即使使用JS生成的元素和属性,也应放置SVG源。 (它还将包括<script>标签,但由于已经存在它们的结果,因此不再需要它们,因此可以安全地删除它们。)

© www.soinside.com 2019 - 2024. All rights reserved.