svg生成的图片在html能自适应，在vue不能自适应问题
svg生成的图片在html能自适应，在vue不能自适应问题
直接上代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>Document</title>
<style>
.container {
width: 100%;
}
.line-wrap {
margin: 0 auto;
}
.circle-load-rect-svg {
margin: 10px auto;
}
.g-rect-path {
fill: none;
stroke-width: 10;
stroke: #60a4e7;
stroke-linejoin: round;
stroke-linecap: round;
}
svg {
display: block;
position: absolute;
}
</style>
</head>
<body>
<div class="">
<div class="container">
<div class="line-wrap">
<svg version="1.1" xml:space="preserve" class="circle-load-rect-svg" width="500" height="250" viewbox="0 0 1100 250">
<polyline points="20 5, 20 150,500 150,500 200" fill="none" class="g-rect-path" />
<polyline points="270 5, 270 150,515 150,515 200" fill="none" class="g-rect-path" />
<polyline points="530 5, 530 200" fill="none" class="g-rect-path" />
<polyline points="780 5, 780 150,545 150,545 200" fill="none" class="g-rect-path" />
<polyline points="1030 5, 1030 150,560 150,560 200" fill="none" class="g-rect-path" />
</svg>
</div>
</div>
</div>
</body>
</html>效果图：
但在新创建一个vue文件下，效果就不一样的。根本不能自适应
vue代码如下:
<template>
<div class="hello">
<div class="container">
<div class="line-wrap">
<svg version="1.1" xml:space="preserve" class="circle-load-rect-svg" width="500" height="250" viewbox="0 0 1100 250">
<polyline points="20 5, 20 150,500 150,500 200" fill="none" class="g-rect-path" />
<polyline points="270 5, 270 150,515 150,515 200" fill="none" class="g-rect-path" />
<polyline points="530 5, 530 200" fill="none" class="g-rect-path" />
<polyline points="780 5, 780 150,545 150,545 200" fill="none" class="g-rect-path" />
<polyline points="1030 5, 1030 150,560 150,560 200" fill="none" class="g-rect-path" />
</svg>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
}
};
</script>
<style >
.circle-load-rect-svg {
margin: 10px;
}
.g-rect-path {
fill: none;
stroke-width: 10;
stroke: #60a4e7;
stroke-linejoin: round;
stroke-linecap: round;
}
svg {
/* width: 300px; */
display: block;
position: absolute;
}
</style>
效果如图
请问一下各位技术大佬~这是神马情况，是vue自身问题吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
太感谢了. 找了2个小时没找到咋回事, 原来是大小写的问题, 特地注册账号, 过来点赞感谢.