开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何缩放嵌入<object>标签的顽固SVG？

要缩放嵌入<object>标签的顽固 SVG，可以使用 CSS 的transform` 属性来实现。以下是一个简单的示例：

首先，创建一个 HTML 文件，并在其中嵌入 SVG 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Scaling SVG</title>
   <style>
        .svg-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .svg-content {
            transform-origin: top left;
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="svg-container">
       <object class="svg-content" data="your-svg-file.svg" type="image/svg+xml"></object>
    </div>
</body>
</html>

在这个示例中，我们创建了一个名为 .svg-container 的容器，用于包含 SVG 文件。我们还创建了一个名为 .svg-content 的类，用于控制 SVG 文件的缩放。

在 .svg-content 类中，我们使用 transform-origin 属性将缩放的原点设置为左上角。然后，我们使用 transform 属性并设置 scale 值来缩放 SVG 文件。在这个示例中，我们将其缩放为原始大小的两倍。
将此 HTML 文件保存到本地计算机，并用浏览器打开。你应该会看到一个缩放的 SVG 文件。

这种方法可以帮助你缩放嵌入<object>` 标签的顽固 SVG。请注意，这种方法可能不适用于所有浏览器，因此在实际应用中可能需要进行一些调整。

相关搜索:如何从跨域url (s3_ <object> /image.svg)将SVG嵌入到HTMLImage.svg标签中如何缩放svg文本的水平居中？如何导入带有svg标签的svg文件？如何使用带有svg标签的svg图像 object标签内的SVG图像与网站内容重叠当svg嵌入在HTML object标记中时，如何让tippy.js使用单独的SVG元素作为目标？如何更新嵌入的svg元素的源代码如何在可缩放的SVG矩形内显示SVG元素的工具提示？JQuery -如何调用嵌入到SVG中的函数如何在wheelnav.js中缩放SVG的图标大小？如何从svg访问html object标记内的javascript函数如何使用‘viewBox’标签设置svg的使用属性？如何解析标签为[object promise]的退货如何修改作为img标签的svg的viewbox 如何自动缩放内联SVG到父容器的宽度和高度？如何缩放SVG以使其中绘制的内容适合容器大小？如何在img标签中更改svg源的颜色？如何在页面加载时加载`object`标签的内容？SVG -如何在具有rgba填充的路径上放置嵌入阴影？在selenium java中如何从SVG标签内的"text“标签获取值

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5(七)——SVG基础入门

声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

01

HTML5(七)——SVG基础入门

声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

03

网页中如何使用SVG

① 如果文件中的根元素 <svg> 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 <svg> 带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果<svg> 带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

00

网页中如何使用SVG

① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

01

SVG 在前端的7种使用方法，你还知道哪几种？

技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。

03

将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。将 SVG 与媒体查询一起使用时，我们可以做类似的事情。

00

位图和SVG用法比较

位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至

06

web 图像技术：前端引入图片的各种方式及其优缺点

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSS background 属性，还可以使用 SVG <image>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。

02

JS控制SVG缩放+鼠标控制事件

直接撸代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js控制SVG缩放</title> </head> <body> <svg id="svg" style="background-color: #FAFAFA;"> <g id="svgPanel"> <g id="grid"></g> <defs>

05

网络图形标准

后端生成图形较为便捷，但是没法生成能够响应用户行为的动态图形（比如生成一个地图，用户点击地图上的某个城市，要显示城市信息，这通过后端图形生成很不容易做到），而且生成图形会吃掉服务端的性能。前端生成图形方面，有用 Applet、ActiveX（这两个都不是什么好东西），Flash 等等，但是现在，我们有纯文本的更好的选择。

00

Python数据可视化利器：深入探索Pygal库的可缩放矢量图表功能

在数据可视化的世界中，创建可缩放的矢量图表是至关重要的，因为它们可以无损地在各种设备和分辨率下进行展示。Python中有许多强大的库可供选择，其中Pygal是一个出色的选择，它提供了创建各种类型的交互式矢量图表的功能。

01

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及

SVG与foreignObject元素

可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript等其他网络标准无缝衔接。SVG图像及其相关行为被定义于XML文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑SVG。

06

新提案，初识CSS的object-view-box属性

在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。

02

几种web字体格式建议收藏

目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及字体格式转换。

02

web前端学习：HTML5十个新特性

：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)

01

前端-SVG 图像入门教程

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

03

SVG 图像入门教程

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

01

HTML学习记录

html全称为：超文本标记语言 (Hyper Text Markup Language, HTML)，是用于建立网页的标准标记语言，由成双成对的标签组合而成。

01

FinClip小程序里如何安全使用SVG

网上零零散散有一些关于在小程序中如何使用SVG的内容，但不是语焉不详，就是信息不完整。在此整理一下，供哪怕是此前从来没有接触过SVG的开发者也可以参考，迅速利用。首先SVG可以被视为一种DSL（Domain Specific Language），也就是说它并不仅仅是JPEG、PNG、GIF之外的又一种图片格式，它还是一种“代码”；也因此，它既有无比的潜力让开发者发挥创意作出有意思的应用，它也有潜在安全风险。在小程序中，起码至目前为止，它的使用方式和在普通网页并不完全一样。

04

在小程序中 SVG 的打开方式

第一种，也是最简单直观的方式，即把svg后缀的文件视作为和PNG、JPEG、GIF类似的图片：

04

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形，主要优势在于可缩放的同时不会影响图片的质量。 SVG 在html 中常用的方法 1.使用元素来嵌入SVG图像 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no

09

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents（数据驱动的文档），是一个用来做数据可视化的JavaScript函数库，而JavaScript文件的后缀通常为.js，所以D3被称为D

08

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents（数据驱动的文档），是一个用来做数据可视化的JavaScript函数库，而JavaScript文件的后缀通常为.js，所以D3被称为D3.js。对D3来说，柱形图、散点图、折线图、饼图、弦图、力导向图、树状图等等都不在话下。总之，只要你愿意写代码，D3.js可以满足你对数据可视化的一切幻想。今天我们以弦图为例进行介绍。弦图弦图主要用于表示两个节点之间的联系。两点之间的连线表示二者具有联系，线的粗细表示权重。下面是之前做的一张电影类型

分享5个关于 Vue 的小知识，希望对你有所帮助（四）

发出事件可以使子组件向父组件传播事件。考虑这样一个场景，我们有一个弹出组件，并且我们打算从父组件切换其可见性。

01

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇，详细讲一下 SVG 的解析和绘制，这部分功能的研究和最终实现由团队的 @黄超超同学负责，感谢提供技术文档和支持。首先我们来看一下 SVG 的文件结构和组成 SVG

09

【前端面试题】01—42道常见的HTML5面试题(附答案)

HTML5为我们提供了更多的语义化标签、更丰富的元素属性，以及更让人欣喜的功能。但在面试中，HTML5部分的面试题主要考察应试者对HTML5API的掌握情况，这是HTML5的重点，也正是这些API推动了前端的发展。

01

SVG图像技术摘要

该公司今天没有，研究了最近流行SVG技术，发现，随着css3不断流行，和浏览器技术的发展，SVG网站将取代大量的图片，成为主流站点图片展示。

02

D3.js-基础知识

数据可视化起源于18世纪，当时使用柱形图和折线图来表示国家进出口量。近年，随着大数据时代的到来，数据可视化作为大数据量的呈现方式，成为当前重要的课题。数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。

05

Power BI x EasyShu：Top商品门店分布地图可视化

每款商品对业绩的贡献不是平均的，对Top产品进行单品可视化分析有助于抓住重点。本文尝试在Power BI中结合EasyShu（由微信公众号Excel催化剂李伟坚老师和EasyShu联合打造）的地图编辑功能，完成对商品的地图可视化。

01

SVG基础

SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年成为W3C推荐标准。

02

D3.js-基础知识

数据可视化起源于18世纪，当时使用柱形图和折线图来表示国家进出口量。近年，随着大数据时代的到来，数据可视化作为大数据量的呈现方式，成为当前重要的课题。数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。

02

D3库实践笔记之图表交互 |可视化系列36

对于前端可视化库来说，交互效果是其基本功能，需要有优雅的效果和简洁的API才能出彩，而如果一个前端可视化工具只能生成静态图表，绝对会显得格格不入，因为在前端拥有交互功能并不复杂。与图表的交互，是指图表元素能根据用户的键盘鼠标操作做出相应的反应，例如悬停高亮、缩放、漫游、拖动节点、点击涟漪效果等等。

00

【Web动画】SVG 线条动画入门

通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG）个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论

02

SVG 快速入门

本文作者：ivweb villainthr SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG

01

重构不完全教程集之二

本文主要讲解了CSS3和JavaScript的一些基础知识，包括字体、CSS3动画、响应式、图片优化、SVG、动画、触发器等。还介绍了一些常用的工具和资源，如GitHub、MDN、CSS Tricks、CSS Media Queries等。同时，也探讨了如何避免重排和重绘，以及提高性能的方法和技巧。

重构不完全教程集之二

字体方面主要包括：字体渲染方式，浏览器默认字体及重置，@font-face自定义字体，字体性能等

01

应用｜1+1构造地表最强流程图工具

大家知道我是一个“24K资深”通信工程师，所以日常画画拓扑图、信令流程图、产品逻辑图等等都是必备技能，但是苦无Visio久矣，所以每次画图都一个脑袋两个大。

01

web名词解释

CSS:层叠样式表(英文全称：Cascading Style Sheets),是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的语言，用于为 HTML 文档定义布局。

02

SVG 的 path 属性绘制图形

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。

03

SVG基础知识速查笔记

svg是指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。svg使用XML格式来定义图形，除ie8之前版本外，绝不部分浏览器均支持svg，可将svg文本直接嵌入HTML中显示。

04

dom-to-image库是如何将html转换成图片的

dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制img实现导出，好了，本文到此结束。

01

d3从入门到出门

css选择器语法: http://www.w3school.com.cn/c***ef/css_selectors.asp

02

Web图标的工程化方案

https://juejin.cn/post/6952150039732944910

01

SVG 线条动画基础入门知识

1、CSS3 动画 2、javascript 动画（canvas） 3、html 动画（SVG）

03

Android开发笔记（一百三十二）矢量图形与矢量动画

与水波图形RippleDrawable一样，矢量图形VectorDrawable也是Android5.0之后新增的图形类。矢量图不同于一般的图形，它是由一系列几何曲线构成的图像，这些曲线以数学上定义的坐标点连接而成。具体到实现上，则需开发者提供一个xml格式的矢量图形定义，然后系统根据矢量定义自动计算该图形的绘制区域。因为绘图结果是动态计算得到，所以不管缩放到多少比例，矢量图形都会一样的清晰，不像位图那样拉大后会变模糊。矢量图形的xml定义有点复杂，其结构可分为三个层次：根标签、组标签、路径标签。

02

HTML５新特性

H4中的input type：text、password、radio、checkbox、file、hidden、submit、reset、image

03

移动Web开发（二）

这些天一直在忙iOS，Android和.Net方面的知识都有些忘记了，汗。不过还是先重温一下HTML吧，手动滑稽。

02

【前端动画】实现动画的6种方式

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。（❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）

01

前端动画实现总结

SVG动画由SVG元素内部的元素属性控制，一般通过一下几个元素控制： - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化，但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭