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>

回転した長方形は3つあるはずですが、どういうわけかChrome、Safari、Inkscapeではそのうちの1つしか表示されません。私はグーグルをしました、そして何が悪いのか見当がつかないです。

4

1 に答える 1

2

あなたの問題は2番目と3番目の負の高さによって引き起こされ<rect />ます。

このコードを自動的に生成する場合は、これらの値が正であることを確認してください。たとえば、JavaScriptを使用して、それらをでラップしますMath.abs( height )。

于 2012-06-20T09:14:44.087 に答える