如何用css改變svg矩形的寬度

這不起作用：

#red { 
    width: 800px; 
} 
#red:hover { 
    width: 1600px; 
}

見jsfiddle。

來源

2014-02-28 l00per

是的，你可以做，檢查這個例子..http：//blog.studio.gd/blog/id/10/how_to_style_svg_with_css_-__part_2-3 –

謝謝，與規模它可以工作，但位置不正確：http://jsfiddle.net/fJLCg/17/ – l00per

是的，它是可能的。用矩形制作一個svg文件，然後用img標籤將它導入到你的html中。

參見：link

來源

2014-02-28 07:58:10 garyry

好吧，但是如果我有30個矩形，我必須創建30個SVG文件並導入到我的html中作爲img標籤？有沒有其他解決方案可以用ID來轉換大小？ – l00per

您將製作單個svg並使用 30次。 –

我做了一些SVG動畫爲您服務。檢查下面的鏈接顯示的例子，如SVG Scaling和SVG element Movement。如示例所示，您可以創建多個rec並按照您的需要製作動畫。

檢查更新演示。 http://jsfiddle.net/kheema/CasPj/11/

來源

2014-02-28 08:50:42

此解決方案適合您嗎？ –

看起來不錯，但它應該改變高度或像這樣的矩形：http://jsfiddle.net/fJLCg/17/ – l00per

好吧，你想這樣嗎？請檢查更新的小提琴鏈接。 http://jsfiddle.net/kheema/CasPj/11/ –

由於width css屬性尚未適用於<rect>元素，因此您無法在您的問題中進行此操作。

但是，您可以通過使用依賴於其他CSS屬性的單位使其工作。

這樣，SVG：

<rect id="red" width="1em" fill="red" height="270" />

和CSS：

#red { 
    font-size: 800px; 
} 
#red:hover { 
    font-size: 1600px; 
}

見jsfiddle。

要回答的後續問題，「你是怎麼做到這一點，如果你想在相反的方向生長的高度（或寬度）？」，這裏有一個方法：

翻轉使用transform="scale(1,-1)"座標系（調整其他值與此一致，例如負座標位置）。

<rect id="red" y="-515.5" width="270" height="2em" transform="scale(1,-1)"/>

和CSS：

#red:hover {  
    animation: scaleheight 1s ease-in-out infinite alternate; 
} 

@keyframes scaleheight { 
    0% { 
     fill:red; 
    } 
    100% { 
     fill:blue; 
     font-size: 300px; 
    } 
}

見jsfiddle。

來源

2014-02-28 09:18:10

哦，這看起來不錯:)可以改變「高度」 - 底部到頂部以及？ – l00per

不確定你的意思。 –

對不起;）我的意思是，它可能從下到上擴展嗎？像這樣，但在另一個方向？ HTTP：//的jsfiddle。net/uH6j5/3/ – l00per

如何用css改變svg矩形的寬度

回答

相關問題