Kann ich gemischte Einheiten mit dem Element 'path' verwenden?

Question

SVG hat ein Rechteck-Element, dessen Dimensionen in Prozent der Dimensionen seines Besitzers und Radius in Pixeln angegeben werden können. Also, indem Sie die folgenden

<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>

Ich kann eine mit abgerundeten Ecken mit dem konstanten Radius, der nicht von der Blockgröße abhängt erhalten. Aber ein einfaches Rechteck mit abgerundeten Ecken ist langweilig und manchmal wollen Sie etwas ausgefallenes (z. B. http://my.opera.com/). Ich habe versucht, 'Pfad' Element zu verwenden, aber es scheint mir, dass wir gemischte Einheiten mit 'Pfad' (Pixel & Prozente) nicht verwenden können. Ich kann auch keine Kombination von Formen verwenden, da Semitransparenten und Farbverlaufsfüllungen nicht funktionieren.

Also meine Frage ist, kann ich 'Pfad' Element mit gemischten Einheiten verwenden? Vielleicht gibt es eine andere Arbeit, die ich übersehen habe?

Answer 1

Pfade und Punktlisten können nur in Benutzereinheiten angegeben werden. Wenn Sie einen Container (z. B. ein SVG- oder Symbolelement) verwenden, der ein neues Koordinatensystem mit 'viewBox' angibt, kann die Auswirkung der Benutzereinheiten beeinflusst werden. Das löst noch nicht alle Fälle.

Um ein paar weitere Fälle zu beheben, können Sie das Bild mit mehreren Formen mit jeweils einem anderen Clip-Pfad erstellen, um die unerwünschten Teile wegzuschneiden. Ein Beispiel für diesen Ansatz finden Sie in der Ausgabe Rounded Corner Generator SVG.

Answer 2

Leider können Pfadkoordinaten nur mit einer einzigen Einheit, Viewport Coordinates, ausgedrückt werden.

Answer 3

Es gibt eine Abhilfe:

<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> 

Ref: http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html