[英]How to scale my svg internal elements to fit the window in width and height
please check this demo . 请检查这个演示。
https://codepen.io/wasiabbas/pen/JQmXmE https://codepen.io/wasiabbas/pen/JQmXmE
when curly braces if coming from left i need to make it fit in height and when it rotates then i need to fit the curly braces in window width. 当花括号从左边来时,我需要使其适合高度,当它旋转时,我需要将花括号适合窗口宽度。 how can i do it?
我该怎么做?
var winWidth = window.innerWidth,
winHeight = window.innerHeight;
const bracesContainer = document.querySelector('.braces-container');
const braces = document.getElementById('braces');
const bracesbg = document.getElementById('bracesbg');
const leftbraces = document.getElementById('leftcb');
const topbraces = document.getElementById('topcb');
function loadAnimation(){
$(braces).css({
backgroundColor: "#000",
width: winWidth,
height: winHeight
});
TweenMax.to(braces, 0.9, {
right:0
});
TweenMax.to(leftbraces, 0.9, {
opacity: 0,
rotation: -90,
y: '60%',
x: '10%',
transformOrigin: 'center center',
delay: .5
});
TweenMax.to(topbraces, 1.2, {
opacity:1,
delay: 1
});
}
$(document).ready(function(){
loadAnimation();
});
Here's a snippet with a simple solution (using D3.js): 这是一个简单解决方案的代码段(使用D3.js):
const svg = d3.select('svg'); const width = parseInt(svg.attr('width')); const height = parseInt(svg.attr('height')); svg.select('path') .transition() .delay(500) .duration(1000) .attr('transform', `translate(0, ${width}) rotate(-90) scale(${width/height})`)
svg { background-color: #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg width='250' height='200'> <path d='M 0,0 H 100 Q 125,0 125,25 V 75 Q 125,100 150,100 Q 125,100 125,125 V 175 Q 125,200 100,200 H 0 z' fill='#fff' /> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.