使用 Bootstrap 的响应式内联 SVG
Posted
技术标签:
【中文标题】使用 Bootstrap 的响应式内联 SVG【英文标题】:Responsive Inline SVG using Bootstrap 【发布时间】:2016-11-29 13:12:32 【问题描述】:如何使用 Bootstrap 使内联 svg 图标响应?这是一个示例代码:
<svg id="mute-audio" xmlns="http://www.w3.org/2000/svg" viewbox="-10 -10 68 68">
<circle cx="24" cy="24" r="34">
<title>Mute Audio</title>
</circle>
<path class="on" transform="scale(0.6), translate(17,18)" d="M38 22h-3.4c0 1.49-.31 2.87-.87 4.1l2.46 2.46C37.33 26.61 38 24.38 38 22zm-8.03.33c0-.11.03-.22.03-.33V10c0-3.32-2.69-6-6-6s-6 2.68-6 6v.37l11.97 11.96zM8.55 6L6 8.55l12.02 12.02v1.44c0 3.31 2.67 6 5.98 6 .45 0 .88-.06 1.3-.15l3.32 3.32c-1.43.66-3 1.03-4.62 1.03-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c1.81-.27 3.53-.9 5.08-1.81L39.45 42 42 39.46 8.55 6z" fill="white"/>
<path class="off" transform="scale(0.6), translate(17,18)" d="M24 28c3.31 0 5.98-2.69 5.98-6L30 10c0-3.32-2.68-6-6-6-3.31 0-6 2.68-6 6v12c0 3.31 2.69 6 6 6zm10.6-6c0 6-5.07 10.2-10.6 10.2-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c6.56-.97 12-6.61 12-13.44h-3.4z" fill="white"/>
</svg>
我尝试了不同的:
class="img-responsive" 在 svg 中
class="embed-responsive-item" 在 容器 div
到目前为止没有运气。如何做到这一点?
【问题讨论】:
【参考方案1】:viewbox
应该是viewBox
。 SVG 属性区分大小写。
您还需要删除 width
和 height
值 - 或将它们更改为 "100%"
。
<svg id="mute-audio" xmlns="http://www.w3.org/2000/svg"
viewBox="-10 -10 68 68">
<circle cx="24" cy="24" r="34">
<title>Mute Audio</title>
</circle>
<path class="on" transform="scale(0.6), translate(17,18)" d="M38 22h-3.4c0 1.49-.31 2.87-.87 4.1l2.46 2.46C37.33 26.61 38 24.38 38 22zm-8.03.33c0-.11.03-.22.03-.33V10c0-3.32-2.69-6-6-6s-6 2.68-6 6v.37l11.97 11.96zM8.55 6L6 8.55l12.02 12.02v1.44c0 3.31 2.67 6 5.98 6 .45 0 .88-.06 1.3-.15l3.32 3.32c-1.43.66-3 1.03-4.62 1.03-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c1.81-.27 3.53-.9 5.08-1.81L39.45 42 42 39.46 8.55 6z" fill="white"/>
<path class="off" transform="scale(0.6), translate(17,18)" d="M24 28c3.31 0 5.98-2.69 5.98-6L30 10c0-3.32-2.68-6-6-6-3.31 0-6 2.68-6 6v12c0 3.31 2.69 6 6 6zm10.6-6c0 6-5.07 10.2-10.6 10.2-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c6.56-.97 12-6.61 12-13.44h-3.4z" fill="white"/>
</svg>
【讨论】:
那为什么 VSCODE 告诉我一切都应该小写? 如果这么说,那就错了。也许在实现 html 验证时没有考虑 SVG 元素。 是的!谢谢!我改成 100% 就可以了!以上是关于使用 Bootstrap 的响应式内联 SVG的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
5-12《响应式布局》——响应式布局介绍和版心BootStrap使用BootStrap步骤BootStrap入门基础BootStrap案例