SVG 旋转删除元素

Question

我正在尝试在Web应用程序中生成svg代码。下面是一个示例输出：

<?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中只显示其中一个。我做了谷歌，不知道出了什么问题。

Answer 1

您的问题是由第二和第三<rect />的负高度引起的。

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