सामग्री के लिए फिट करने के लिए स्केल एसवीजी आकार, जहां सामग्रियों में विदेशी ऑब्जेक्ट

कोई तरीका है - अधिमानतः जावास्क्रिप्ट का उपयोग किए बिना - कुछ HTML सामग्री को foreignObject का उपयोग करके एक एसवीजी आकार में डालने के लिए, जैसे कि एसवीजी आकार स्वत: आकार (या स्केल) अपनी सामग्री फिट करने के लिए?सामग्री के लिए फिट करने के लिए स्केल एसवीजी आकार, जहां सामग्रियों में विदेशी ऑब्जेक्ट

आईई। बहुत अस्पष्ट इस स्यूडोकोड उदाहरण की तरह है, लेकिन वैध, और कार्यात्मक तरह से मैं का वर्णन किया है में कुछ:

<?xml version="1.0" standalone="yes"?> 
<svg xmlns = "http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="SCALE_TO_FIT_CONTENTS" height="SCALE_TO_FIT_CONTENTS" fill="gray"> 
    <foreignobject width="100%" height="100%"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div>Some HTML text</div> 
     </body> 
    </foreignobject> 
    </rect> 
</svg>

स्रोत

2012-07-08 sampablokuper

आप 100% और ऊंचाई माता पिता –

देखभाल की 100% के साथ की कोशिश की है एक जवाब के रूप में एक उदाहरण देने के लिए? यदि यह वर्णन करता है जैसा कि मैंने वर्णन किया है, तो मैं इसे स्वीकार्य रूप से स्वीकार कर दूंगा। – sampablokuper

@sampablokuper आपने क्या प्रयास किया है? – Duopixel

जावास्क्रिप्ट का उपयोग किए बिना, वहाँ कोई संभव तरीका आप ऐसा कर सकता है। वास्तव में, एसवीजी आकार कंटेनर के रूप में इस्तेमाल नहीं किया जा सकता है। लेकिन, मुझे आशा है कि यह आप के लिए क्या पूछ रहे है:

<script type="text/javascript"> 
    function myFun(){ 
     var w = document.getElementById("myDiv").scrollWidth; 
     document.getElementById("myRect").setAttribute("width",w); 
    } 
</script> 
<svg xmlns = "http://www.w3.org/2000/svg" onload="myFun()"> 
    <rect id="myRect" x="10" y="10" width="0" height="100" fill="red"></rect> 

     <foreignObject x="10" y="10" position="absolute" width="100%" height="100%"> 
      <div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div> 
     </foreignObject> 
</svg>

स्रोत

2012-07-19 14:56:37

सामग्री के लिए फिट करने के लिए स्केल एसवीजी आकार, जहां सामग्रियों में विदेशी ऑब्जेक्ट

उत्तर

संबंधित मुद्दे