0

我正在尝试在 Web 应用程序中生成 svg-Code。这是一个示例输出：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:ev="http://www.w3.org/2001/xml-events"
  version="1.1" baseProfile="full"
   width="1000px" height="600px">
  <rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/>
  <rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/>
  <rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/>
</svg>

应该有三个旋转的矩形，但不知何故，在 Chrome、Safari 和 Inkscape 中只显示了其中一个。我做了谷歌，不知道出了什么问题。

4

1 回答 1

2

您的问题是由 second 和 third 的负高度引起的<rect />。

如果您自动生成此代码，请确保这些值为正。例如，使用 JavaScript，将它们包装在Math.abs( height ).

于 2012-06-20T09:14:44.087 回答