'path'要素を含む混合単位を使用できますか？

Question

SVGには矩形要素があります。この要素は、所有者の次元のパーセントとピクセル単位の半径で指定できます。だから次を行うことによって

<div style="position: relative;"> 
<object class="AIRound" type="image/svg+xml" 
data="data:image/svg+xml,<svg 
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%' 
height='100%' rx='10px' ry='10px' fill='#99ff99' 
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px; 
width:100%; height:100%; z-index:-100;"></object> 
Sample text<br>Sample text 
Sample text<br>Sample text 
</div>

ブロックサイズに依存しない一定の半径を持つ丸いコーナーを得ることができます。しかし、角が丸い単純な四角形は退屈であり、時にはあなたは何か幻想的なものを望んでいる（例えば、http://my.opera.com/）。私は 'path'要素を使用しようとしましたが、私には 'path'（ピクセル&パーセント）の混合単位を使用できないようです。半透明とグラデーションの塗りつぶしができないので、シェイプの組み合わせを使用することはできません。

私のqeustionは、混在したユニットで 'path'要素を使用できますか？私が見落とした別の作品があるのでしょうか？

Answer 1

パスとポイントリストは、ユーザ単位でのみ指定できます。 'viewBox'を用いて新しい座標系を指定するコンテナ（例えば、svgまたはシンボル要素）を有することによって、ユーザユニットが解決するものに影響を与えることが可能である。それでもすべてのケースを解決するわけではありません。

いくつかのケースを修正するには、それぞれ異なるクリップパスを持つ複数のシェイプを使用してイメージを構築し、望ましくない部分を切り取ることができます。このアプローチの例については、Rounded Corner Generator SVG出力をご覧ください。

Answer 2

残念ながら、パス座標は1つの単位、ビューポート座標でしか表現できません。

Answer 3

回避策があります：

<svg width='100%' height='100%' viewBox='0 0 100 100'> 
<!-- Now in here, a coordinate (25,50) corresponds to 
    (25%,50%) of the outer viewport. --> 
<path d="M36,96 C 54,100 94,73 97,61 ..."/> 
</svg> 

は、文献： http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html