まず最初に、Raphael を 2 日間使用しているとだけ言っておきますので、この質問をしたことで私を撃たないでください。
Raphael が作成したドロップダウンを次のようにレンダリングしています。
ウィンドウを拡大すると、下の境界線は幅に基づいて<div>いるため、完全に拡大されます (下の画像は少し歪んでいる可能性があります)。
点線は（本来あるべきように）拡大します。問題は、指定された % に一致するようにラファエル形状を拡大（再描画）する方法です。
描画部分:
for (var i = 0; i < holder.length; i++) {
var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width
paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());
var rect = paper.roundedRectangle(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height(), 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
fill: "#E6E7E8", //background color
stroke: "#ddd" //border color (technically shape color)
});
var t = paper.text((title.slice(i, i + 1).width() - (title.slice(i, i + 1).width() - 20)), (title.slice(i, i + 1).height() / 2), title_content.slice(i, i + 1).text()).attr({ //add text
"text-anchor": "start", //left-align
"font-size": 16,
"font-family": "Arial, Helvetica, sans-serif"
});
textWrap(t, title.slice(i, i + 1).width()); //wrap text
}
現在、サイズ変更のためにこれを持っていますが、機能しません。ステータスバーにエラーが表示されますが、ie7しかないため、firebugを起動してコンソールを読むことができません。どこが間違っていますか？
$(window).resize(function() {
var i = 0;
$(title).each(function() {
paper.setSize($(this).width(), $(this).height());
rect.SetSize($(this).width(), $(this).height());
redraw_element();
i++;
});
});
更新 - 100% に設定すると、コンテナが広くても短いレンダリングになります。
var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width
paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());
var rect = paper.roundedRectangle(0, 0, '100%', '100%', 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
fill: "#E6E7E8", //background color
stroke: "#ddd", //border color (technically shape color)
width: '100%',
height: '100%'
});
レンダリング
