我最初使用的是svg的wIDth和height属性,并且每次屏幕调整大小时都会设置这些值.
然后我发现了视图框.
我不明白的是,如果没有svg wIDth和height属性,我应该如何设置vIEwBox的wIDth和height参数.
我有这个svg文件
document.addEventListener("DOMContentLoaded",function(){ var container = document.querySelector('.chart'); container.addEventListener('click',popOut,false)});function popOut() { var container = document.querySelector('.chart'); if (container.classname.split(/\s+/).indexOf("popper") === -1) {container.classList.add('popper'); } var svg = document.querySelector('svg');} HTML { min-height: 100%; height: 100%; margin: 0;}div { border: 1px solID gray;}body { height: 100%; Font-size: 20px;}path { stroke: #000;}.container { display: flex; flex-direction: column; flex: 1; height: 100%;}.container>div { flex: 1;}.row { display: flex;}.item { flex: 1; padding: 8px;}.chart { display: inline-block; position: relative; wIDth: 100%; height: 100%; vertical-align: top; overflow: hIDden; "}.popper { z-index: 1000 !important; wIDth: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0; background-color: #fff;} <HTML> <body><div > <div >div One</div> <div > <div > <button type="button" onClick="window.popOut()"> Pop Out </button> <svg preserveAspectRatio="xMinYMin meet" vIEwBox="0 0 1200 800"><g transform="translate(30,37)"><g transform="matrix(1,1,0)"><g transform="translate(0,0)"><path d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,0" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path><path d="M567.8181818181819,353.5C567.8181818181819,0" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path><path d="M946.3636363636364,353.5C946.3636363636364,0" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path><path d="M189.27272727272728,530.25,94.63636363636364,707" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path><path d="M189.27272727272728,283.90909090909093,707" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path></g><g transform="translate(0,0)"><g transform="translate(567.8181818181819,0)" opacity="1"><g transform="matrix(1,0)" ><svg x="0" y="0" ><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></svg> <g > <use xlink:href="#icon-Plan"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="48.63100051879883" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0" ><text wIDth="150" y="68.63100051879883" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g> </g> </g> <g transform="translate(189.27272727272728,353.5)" opacity="1"> <g transform="matrix(1,0)" ><svg x="0" y="0" ><polygon points="25.98076211353316,-30" ></polygon></svg> <g > <use xlink:href="#icon-Service"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="48.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg> <svg x="0" y="0" ><text wIDth="150" y="68.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Service</tspan></text></svg> </g><svg height="20" wIDth="20" vIEwBox="15 55 30 20"><g><circle cx="15" cy="10" r="10" stroke-wIDth="2"></circle><line x1="8.5" y1="10" x2="21" y2="10" stroke-wIDth="2"></line></g></svg></g> </g> <g transform="translate(567.8181818181819,-30" ></polygon></svg> <g > <use xlink:href="#icon-Service"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="48.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0em">General Accounting</tspan></text></svg> <svg x="0" y="0" ><text wIDth="150" y="68.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Service</tspan></text></svg> </g><svg height="20" wIDth="20" vIEwBox="15 55 30 20"><g><circle cx="15" cy="10" r="10" stroke-wIDth="2"></circle><line x1="8.5" y1="10" x2="21" y2="10" stroke-wIDth="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-wIDth="2"></line></g></svg></g> </g> <g transform="translate(946.3636363636364,-30" ></polygon></svg> <g > <use xlink:href="#icon-Service"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="48.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg> <svg x="0" y="0" ><text wIDth="150" y="68.92399978637695" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Service</tspan></text></svg> </g><svg height="20" wIDth="20" vIEwBox="15 55 30 20"><g><circle cx="15" cy="10" r="10" stroke-wIDth="2"></circle><line x1="8.5" y1="10" x2="21" y2="10" stroke-wIDth="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-wIDth="2"></line></g></svg></g> </g> <g transform="translate(94.63636363636364,707)" opacity="1"> <g transform="matrix(1,-30" ></polygon></svg> <g > <use xlink:href="#icon-Activity"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="52.00199890136719" x="0" text-anchor="mIDdle" ><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg> <svg x="0" y="0" ><text wIDth="150" y="72.00199890136719" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Activity</tspan></text></svg> </g>0</g> </g> <g transform="translate(283.90909090909093,-30" ></polygon></svg> <g > <use xlink:href="#icon-Activity"></use> </g> <g><svg x="0" y="0" ><text wIDth="150" y="52.00199890136719" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg> <svg x="0" y="0" ><text wIDth="150" y="72.00199890136719" x="0" text-anchor="mIDdle" ><tspan x="0" dy="0.71em">Activity</tspan></text></svg> </g>0</g> </g> </g> </g> </g> </svg> </div> <div >Column two</div> <div >Column Tree</div> </div></div> </body></HTML>
我已将preserveAspect比率设置为xMinYMin meet的默认值,但我不知道如何设置wIDth和height的初始值.
在我的示例中,svg图表从左下角开始是一个小图像,然后可以d出以接管整个页面.
我真的不明白如何获得价值观.
我刚刚使用了试验和错误来获取初始的vIEwBox值,我想知道如何基于parenet元素或其他方式获取它们.
在线阅读很多但仍然在黑暗中关于第一个值和svg在整个页面上展开的初始值应该是什么.
解决方法 这不是您期望的答案,但我希望它能帮助您改进您的问题.这就是我所做的：
>在SVG中,我添加了< defs>元素和我在里面放了一个多边形#thehex.接下来,我删除了SVG中的所有多边形,并将其替换为< use>元素使用#thehex.
同样在< defs>我把它作为一个<符号> zoomout__container,因为你需要它几次.
>为了减少冗长,我已经移动了CSS中的样式.一个不那么冗长的SVG更容易阅读,至少对我而言.
>我已经替换了嵌套的< svg>具有组或符号的元素.
>在CSS中我添加了矢量效果：非缩放行程;因为这可以避免在SVG非常小时丢失这些路径.
>文本问题：当SVG非常小时,读取文本是不可能的.所以我在SVG元素宽度不足400px时删除文本,但你可能想重新考虑这个.总帐组的文本也存在问题,这个文本有一个dy =“ – 1em,使文本在六边形上显示.你需要对此作出决定.
>另外在CSS中我添加了max-wIDth：140vh;对于SHG元素,以便始终将其保留在视口中.
因为我认为它们可能很重要,所以我没有删除你的课程.
let S = window.getComputedStyle(svg,null);let W = parseInt(S.getPropertyValue("wIDth"));function init() { S = window.getComputedStyle(svg,null); W = parseInt(S.getPropertyValue("wIDth")); if (W < 400) { svg.style.setProperty("--display","none"); } else { svg.style.setProperty("--display","block"); }}setTimeout(function() { init(); addEventListener("resize",init,false);},15); svg { border: 1px solID; overflow: visible; max-wIDth: 140vh; display: block; margin: 0 auto;}circle { fill: red;}path { stroke: #000; vector-effect: non-scaling-stroke;}text { pointer-events: none; text-anchor: mIDdle; Font-size: 25px; display: var(--display);}line { stroke: gold; stroke-wIDth: 50;} <svg ID="svg" vIEwBox="-30 -37 1200 837" ><defs><polygon ID="thehex" points="25.98076211353316,-30" ></polygon> <symbol ID="zoomout__container" vIEwBox="0 0 30 20"> <circle cx="15" cy="10" r="10" stroke-wIDth="2"></circle> <line x1="8.5" y1="10" x2="21" y2="10" stroke-wIDth="2"></line> <line x1="16" y1="5" x2="16" y2="15" stroke-wIDth="2"></line> </symbol></defs><g ><g > <desc>connectors</desc> <path d="M189.27272727272728,0" stroke-wIDth="1" stroke-opacity="0.2" fill="none" ></path> <path d="M567.8181818181819,0" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path> <path d="M946.3636363636364,0" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none" ></path> <path d="M189.27272727272728,707" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path> <path d="M189.27272727272728,707" percent="20.5" stroke-wIDth="1" stroke-opacity="0.2" fill="none"></path> </g><!--connectors--> <g > <g transform="translate(567.8181818181819,0)" opacity="1"><g ><g ><use xlink:href="#thehex"></use> </g><g ><text y="48.63100051879883"><tspan x="0" dy="0em">Finance BCP</tspan></text><text y="68.63100051879883"><tspan x="0" dy="0.71em">Plan</tspan></text></g> <g ><use xlink:href="#icon-Plan"></use></g></g></g><!--node__0--> <g transform="translate(189.27272727272728,353.5)" opacity="1"><g ><g ><use xlink:href="#thehex"></use></g><g ><text y="48.92399978637695"><tspan x="0" dy="0em">Accounts Receivable</tspan></text> <text y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text></g> <g ><use xlink:href="#icon-Service"></use></g> <use xlink:href="#zoomout__container" x=-10 y="-10" height="20" wIDth="20" /> </g></g><!--node__1--> <g transform="translate(567.8181818181819,353.5)" opacity="1"><g ><g ><use xlink:href="#thehex"></use></g><g ><text wIDth="150" y="48.92399978637695"><tspan>General Accounting</tspan></text><text wIDth="150" y="68.92399978637695"><tspan dy="0.71em">Service</tspan></text></g> <g ><use xlink:href="#icon-Service"></use></g><use xlink:href="#zoomout__container" x=-10 y="-10" height="20" wIDth="20" /></g></g><!--node__2--> <g transform="translate(946.3636363636364,353.5)" opacity="1"><g ><g ><use xlink:href="#thehex"></use></g><g ><text y="48.92399978637695" x="0"><tspan x="0" dy="0em">Accounts Payable</tspan></text><text wIDth="150" y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text></g> <g ><use xlink:href="#icon-Service"></use></g><use xlink:href="#zoomout__container" x=-10 y="-10" height="20" wIDth="20" /></g></g><!--node__3--> <g transform="translate(94.63636363636364,707)" opacity="1"><g ><g ><use xlink:href="#thehex"></use></g><g ><text y="52.00199890136719"><tspan dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text><text y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text></g> <g ><use xlink:href="#icon-Activity"></use></g></g></g><!--node__4--> <g transform="translate(283.90909090909093,707)" opacity="1"><g ><g ><use xlink:href="#thehex"></use></g><g ><text wIDth="150" y="52.00199890136719"><tspan x="0" dy="0em">Accounts Receivable</tspan></text><text wIDth="150" y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text></g> <g ><use xlink:href="#icon-Activity"></use></g> </g></g><!--node__5--></g><!--nodes--></g><!--tree--></svg>总结
以上是内存溢出为你收集整理的html – 在svg上没有指定宽度和高度时使用viewbox和preserveaspect ratio的响应式svg全部内容，希望文章能够帮你解决html – 在svg上没有指定宽度和高度时使用viewbox和preserveaspect ratio的响应式svg所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）