SVG旋轉刪除元素

我試圖在Web應用程序中生成svg代碼。下面是一個例子輸出：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中只顯示其中之一。我做了谷歌，不知道什麼是錯的。 Thx爲您提供幫助。

來源

2012-06-20 Teris

您的問題是由第二個和第三個<rect />負高度引起的。

如果您自動生成此代碼，請確保這些值爲正值。例如，使用JavaScript，將它們包裝在Math.abs(height)中。

來源

2012-06-20 09:14:44 Sirko

非常感謝你，現在看起來很明顯。只需編輯我創建元素的方式。非常感謝你！ – Teris

SVG旋轉刪除元素

回答

相關問題