में निश्चित स्थिति को रखकर तत्व को स्केल कैसे करें मैं नीचे की स्थिति को निश्चित स्थिति में स्केल करना चाहता हूं।एसवीजी
<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/>
जब स्केलिंग शुरू हो रहा है तो यह एक स्थान से दूसरे स्थान पर जाता है। मैं ऑब्जेक्ट को स्थानांतरित नहीं करना चाहता हूं, मैं बस ऑब्जेक्ट के आकार को बड़ा करना चाहता हूं।
मैंने निम्नलिखित लिंक का उल्लेख किया है।
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System
कैसे निश्चित स्केलिंग करना है?
मैं तत्व को एनिमेट करना चाहता हूं iee निश्चित स्थिति में आकार बढ़ाएं। मैंने निम्नलिखित तरीके से लागू किया है। लेकिन यह तत्व मूल से तत्व को स्थानांतरित करता है। कृपया नीचे कोड देखें।
var box = element.getBBox();
var scaleVal=null, x=null, y=null;
$(element).animate(
{
scale: 1,
centerX:box.x+(4*transX),
centerY:box.y+(4*transY)
},
{
duration: 4000,
step: function(now,fx) {
if (fx.prop == "scale") {
scaleVal = now;
} else if (fx.prop == "centerX") {
x = now;
} else if (fx.prop == "centerY") {
y = now;
}
if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) {
$(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")");
}
}
)
केंद्रित बिंदु में स्केलिंग के लिए नीचे दिए गए लिंक को संदर्भित करता है।
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System
लेकिन यह अभी भी मूल से शुरू होता है और तत्व को बड़ा करता है।
धन्यवाद,
शिव
कोशिश करें [phrogz] (http://stackoverflow.com/questions/4850821/svg-coordinates-with-transform-matrix) उत्कृष्ट उत्तर –
@ एल्विन: यह मेरी आवश्यकता के लिए प्रासंगिक नहीं है। – SivaRajini