大佬教程收集整理的这篇文章主要介绍了相对 svg 大小 代码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
请以全屏模式查看;)
var elmIDs = ['playground'];
var x,y = 0;
function getXYpos(elm) {
x = elm.offsetleft;
y = elm.offsettop;
elm = elm.offsetParent;
while(elm != null) {
x = parseInt(X) + parseInt(elm.offsetleft);
y = parseInt(y) + parseInt(elm.offsettop);
elm = elm.offsetParent;
}
return {'xp':x,'yp':y};
}
function getCoords(E) {
var xy_pos = getXYpos(this);
if(navigator.appVersion.indexOf("MSIE") != -1) {
var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;
x = event.clIEntX + standardBody.scrollleft;
y = event.clIEntY + standardBody.scrolltop;
}
else {
x = e.pageX;
y = e.pageY;
}
x = x - xy_pos['xp'];
y = y - xy_pos['yp'];
document.getElementByID('log').INNERHTML = 'X= '+ x+ ',Y= ' +y;
}
for(var i=0; i<elmIDs.length; i++) {
if(document.getElementByID(elmIDs[i])) {
document.getElementByID(elmIDs[i]).onmousemove = getCoords;
}
}@Font-face {
Font-family: ubuntu-mono;
src: url(ubuntu-mono.ttf);
}
@Font-face {
Font-family: ubuntu;
src: url(ubuntu.ttf);
}
HTML{
height: 90%;
}
body{
BACkground-color: #9c7055;
height: 90%;
justify-content: center;
overflow: hIDden;
}
.bg{
position: relative;
top: -30%;
bottom: 10px;
height: 610px;
wIDth: 410px;
margin-left: auto;
margin-right: auto;
}
p{
Font-family: ubuntu-mono;
Font-size: 30px;
}
#cptpcp::after{
content: "'s turn";
}
#cptpc{
position: relative;
wIDth: 100%;
top: -20px;
}
h1{
top: -9vh;
position: relative;
text-align: center;
Font-size: 17vh;
Font-family: ubuntu;
wIDth: 100%;
}<!DOCTYPE HTML>
<HTML lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script>
</head>
<body>
<div ID="cptpc">
<p ID="cptpcp">
<span ID="log"></span>
<span ID="log_f"></span>
</p>
<h1>
NaPa
</h1>
</div>
<div class="bg" ID="playground">
<?xml version="1.0" enCoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBliC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" wIDth="450" height="610" vIEwBox="0 0 1000 1355.56" xml:space="preserve">
<g transform="matrix(2.43 0 0 2.43 498.11 681.07)">
<g>
<g transform="matrix(0 -0.97 0.97 0 -0.09 257.4)">
<path style="stroke: rgb(255,255,255); stroke-wIDth: 9; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0); fill-rule: nonzero; opacity: 1;" transform=" translate(0,0)" d="M -1.0658141e-14 -199.26991 L 1.0658141e-14 199.26991" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 -189.08 -0.11)">
<path style="stroke: rgb(255,255); stroke-wIDth: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0)" d="M -277.29633 0 L 277.29633 0" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 2.17 0.03)">
<path style="stroke: rgb(255,0)" d="M 275 -197.5 L -275 197.5" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.97 0.97 0 1.31 -258.98)">
<path style="stroke: rgb(255,0)" d="M 0 -198.51007 L 0 198.51007" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 188.96 0)">
<path style="stroke: rgb(255,0)" d="M 278.662 -2.842171e-14 L -278.662 2.842171e-14" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 -1.97 -2.84)">
<path style="stroke: rgb(255,0)" d="M 0 -200.06248 L 0 200.06248" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 -1.03 0.16)">
<path style="stroke: rgb(255,0)" d="M -277.29633 0 L 277.29633 0" stroke-linecap="round" />
</g>
<g transform="matrix(0 -0.94 0.94 0 1.77 -2.42)">
<path style="stroke: rgb(255,0)" d="M -273 -200 L 273 200" stroke-linecap="round" />
</g>
</g>
</g>
</svg>
</div>
</body>
</HTML>
有两个相互关联的主要问题:-
svg 和 div with the ID 'playground' 的大小相对于屏幕大小x,y 中获取鼠标的 svg 坐标，0%,0% 坐标应该是 svg 的开始。与我的代码不同，我想用 % 而不是 px 我想我可以使用 Jquery 的 $(window).wIDth() 和 $(window).height() 并使用它来将值从像素映射到百分比。希望我很清楚，如果不是，请评论这篇文章。
哦，我刚刚找到了一个答案通过在 svg 中使用 preserveAspectRatio="none" 并在 css 中调整它的大小并使用 JQuery 的 $(window).width() & $(window).height() 我能够使用此功能映射值（我尝试创建一个类似 aurdinos @H_977_9@map() 的函数）
function map(x,in_min,in_max,out_min,out_maX) {
return Math.trunc((x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min);
}
以上是大佬教程为你收集整理的相对 svg 大小 代码全部内容，希望文章能够帮你解决相对 svg 大小 代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。