润乾实现引入svg并显示在页面中

最新推荐文章于 2023-11-20 09:25:48 发布
原创 最新推荐文章于 2023-11-20 09:25:48 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了SVG（可伸缩矢量图形）在报表中的应用，包括SVG的基本概念、如何嵌入HTML文档以及在报表中展现SVG时遇到的问题。重点介绍了SVG文件通过HTML标签嵌入的方法，并讨论了不同浏览器对SVG的支持情况。最后指出，尽管可以预览单独的SVG文件，但在实际报表中应用时可能会遇到浏览器兼容性问题。

需求说明：目前有些需求需要把svg放到报表中并展现。

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
单独的预览这个.svg文件是没有问题的但是要在报表中展现就得放到html中

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

润乾设计器中可以设置表格的数据类型是html类型

单元格中添加如下语句：<embed src="test.svg" width="300" height="100"  type="svg+xml" />（test.svg这里是定义好的放到相同目录下）

发布预览：

这里有些缺陷的是根据浏览器不同和遵循的协议不同，一些浏览器就不能生成相应的svg图形。


网页引入svg图片的4种方式
晴空闲云
10-11 4万+
web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。
润乾集算报表生成SVG统计图的示例
u012388497的专栏
08-27 870
SVG作为一种矢量图形，具有任意缩放而不失真、可以被高质量打印、文件较小、交互性强等特性，成为当前一种主流的图片格式。润乾集算报表中已经封装了SVG生成类库，可以生成SVG格式的统计图，方便用户在PC或移动端查看报表统计图。 这里通过一个示例说明集算报表生成SVG统计图的过程。 连接数据源 打开集算报表设计器，菜单栏选择工具-数据源，在弹出的数据源编辑窗口中新建数据源或连接现有数据源，这里使
SVG图片在HTML页面中的四种加载方法
大剑师兰特的GIS世界
11-20 6850
SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。这里有四种引用加载的形式。
vue引入svg图片
Liw_J的博客
06-07 8747
一、很早之前做项目有使用到svg图片，一直没有记录，后来在百度发现没一个能用的，索性自己整理归纳一个 二、步骤 1、安装 svg-sprite-loader npm install --savesvg-sprite-loader 2、在vue.config.js中加入配置 chainWebpack: config => { const svgRule = config.module.rule("svg"); svgRule.uses.clea...
小白详解Vue3项目中怎么引入 SVG 图标
qq_29701691的博客
09-01 5655
既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的 阿里图标库 来寻找。创建好项目后，我们进入到 阿里的 素材库 里面找一些后续需要的图标，进行解压，删除不必要的东西，只留下 iconfont.js 文件即可。那我们只能将项目里的图标，选择 Symbol 并 下载至本地。这里讲解下如何将 阿里图标库 里面的东西，放到我们的页面上。进入页面，找到 资源管理 下面的 我的项目，并创建项目。引入 阿里的 SVG 图标到项目中。将 购物车 里面的图标添加到项目中。并添加到 购物车 中，...
将SVG图引入到HTML页面的实现
01-21
将SVG图引入到HTML网页，目前只有三种办法，前两种很相似，第三种更简单。下来介绍一下这是那种方法。 第一种： 使用<embed>标签：   这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的...
网页中SVG图片的显示方法
07-18
资源下载链接为： ...SVG（Scalable Vector Graphics，可缩放...借助HTML5特性，开发者能轻松在网页中引入SVG，提升视觉效果和用户体验。在实际项目中，可根据需求灵活选择上述方法，为网站或应用增加生动和交互性的元素。
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
总结，要在Vue项目中引用SVG文件并给SVG元素赋值，首先要确保SVG文件的格式正确，然后在Vue组件中引入SVG内容，最后利用JavaScript操作DOM实现元素的赋值。理解SVG的基本概念和属性，如`viewBox`，将有助于更有效地...
Qt QML 解决SVG图片显示模糊的问题
03-17
Qt中显示SVG图片模糊的问题，自绘图形，继承于QQuickPaintedItem，然后注册到QML中使用
润乾报表参数传递那些事
xiaohuihui_1992的博客
11-30 9918
润乾V4 润乾报表 参数传递 页面输入 参数模板 自定义输入
svg入门：使用js去操作svg图像
胡世林的博客
06-21 2万+
怎么使用js去读取svg文件
在html页面中嵌入SVG的几种方式
weixin_34210740的博客
04-24 3355
之前写到过http://shuxiayeshou.blog.51cto.com/4452347/1759972今天整理一下，因为又有新的方法可用首先还是说说老的1. embed标签<embedsrc="xxx.svg"type="p_w_picpath/svg+xml"/>2. object标签<objectdata="xxx.svg"type="...
将SVG 图引入到HTML页面
热门推荐
马优晨
11-04 5万+
将SVG图引入到HTML网页，目前只有三种办法，前两种很相似，第三种更简单。下来介绍一下这是那种方法。第一种：使用<embed>标签： 这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspa
基于最优剪枝深度优先搜索算法实现二维空间障碍物规避与最短路径规划的可视化系统_三维空间路径规划竞赛项目二维化实现障碍物智能规避路径折弯夹角约束满足起点至终点最短路径计算算法.zip
最新发布
12-05
基于最优剪枝深度优先搜索算法实现二维空间障碍物规避与最短路径规划的可视化系统_三维空间路径规划竞赛项目二维化实现障碍物智能规避路径折弯夹角约束满足起点至终点最短路径计算算法.zip
软件工具Notepad系列文本编辑器安装配置指南：Windows系统记事本与Notepad++下载使用全流程解析
12-05
内容概要：本文详细介绍了Windows自带记事本（Notepad）和功能增强型文本编辑器Notepad++的下载、安装、配置及使用方法。重点讲解了Notepad++的官方下载渠道、安装步骤（包括安装版与便携版）、首次使用时的语言与编码设置、插件安装、主题优化以及特色功能如多标签编辑、语法高亮、搜索替换和宏录制等。同时提供了常见问题解决方案，并对比了Notepad++与其他主流编辑器（如VS Code、Sublime Text等）的功能差异，给出了不同使用场景下的选择建议。; 适合人群：需要进行简单文本编辑或代码编写的初学者、程序员及IT技术人员，尤其适合希望提升编辑效率的办公人员和开发者；; 使用场景及目标：①快速安装并配置Notepad++用于编程和文本处理；②解决中文乱码、右键菜单缺失、插件安装失败等问题；③根据实际需求选择合适的文本编辑工具；④实现便携式编辑环境搭建； 阅读建议：建议按照文档顺序逐步操作，优先从官网下载软件以确保安全，安装过程中注意选项勾选，首次使用时应完成基本配置以优化体验，同时可结合插件扩展功能，提升工作效率。
AI 代码审查Review工具（附部署方式指南和源代码）
12-05
AI 代码审查Review工具 是一个旨在自动化代码审查流程的工具。它通过集成版本控制系统（如 GitHub 和 GitLab）的 Webhook，利用大型语言模型（LLM）对代码变更进行分析，并将审查意见反馈到相应的 Pull Request 或 Merge Request 中。此外，它还支持将审查结果通知到企业微信等通讯工具。 一个基于 LLM 的自动化代码审查助手。通过 GitHub/GitLab Webhook 监听 PR/MR 变更，调用 AI 分析代码，并将审查意见自动评论到 PR/MR，同时支持多种通知渠道。 主要功能 多平台支持: 集成 GitHub 和 GitLab Webhook，监听 Pull Request / Merge Request 事件。 智能审查模式: 详细审查 (/github_webhook, /gitlab_webhook): AI 对每个变更文件进行分析，旨在找出具体问题。审查意见会以结构化的形式（例如，定位到特定代码行、问题分类、严重程度、分析和建议）逐条评论到 PR/MR。AI 模型会输出 JSON 格式的分析结果，系统再将其转换为多条独立的评论。 通用审查 (/github_webhook_general, /gitlab_webhook_general): AI 对每个变更文件进行整体性分析，并为每个文件生成一个 Markdown 格式的总结性评论。 自动化流程: 自动将 AI 审查意见（详细模式下为多条，通用模式下为每个文件一条）发布到 PR/MR。 在所有文件审查完毕后，自动在 PR/MR 中发布一条总结性评论。 即便 AI 未发现任何值得报告的问题，也会发布相应的友好提示和总结评论。 异步处理审查任务，快速响应 Webhook。 通过 Redis 防止对同一 Commit 的重复审查。 灵活配置: 通过环境变量设置基
如何在HTML中正确引入SVG文件以避免显示模糊？
07-26
在HTML中正确引入SVG文件以避免显示模糊，关键在于选择合适的引入方式和优化SVG的显示设置。由于SVG是矢量图形格式，理论上可以无损缩放，但在实际使用中，尤其是在不同浏览器环境下，可能会出现模糊问题。 使用`<object>`或`<embed>`标签引入SVG文件可以确保更好的兼容性和清晰度。这些标签允许浏览器直接使用内置的SVG渲染引擎，而不是将其作为图像处理。例如，使用`<object>`标签引入SVG的方式如下： ```html <object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object> ``` 这种方式可以有效避免Firefox等浏览器中可能出现的模糊问题，因为SVG会根据容器大小动态调整[^1]。 如果使用`<img>`标签引入SVG，确保SVG文件本身已经正确设置了`viewBox`属性。`viewBox`定义了SVG的可视区域和坐标系统，确保SVG在不同尺寸下都能正确缩放。例如： ```xml <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- SVG content --> </svg> ``` 通过`viewBox`的设置，SVG可以在不同分辨率和窗口大小下保持清晰，避免因缩放导致的模糊问题[^1]。 此外，在某些情况下，SVG图像可能包含多余的内容区域，例如SVG的实际大小为800×176，但有效内容区域为104×23。此时可以通过外层`<div>`限制显示区域，并隐藏多余部分。示例代码如下： ```html <td> <div style="width: 104px; height: 23px; overflow: hidden;"> <img alt="" src="${basePath}/static/images/logo.svg"> </div> </td> ``` 这种方式可以确保SVG仅显示核心内容，避免因多余区域导致的视觉干扰或模糊问题[^2]。 对于动态SVG，例如在窗口大小变化时需要重新调整的SVG，应确保SVG的响应式设计支持。可以通过JavaScript动态调整SVG的尺寸或使用CSS的响应式布局技术来优化显示效果。 最后，如果SVG中包含文本元素，模糊问题可能与字体渲染有关。可以通过设置`fill`和`stroke`属性来优化文本显示效果。例如，将`stroke`设置为透明，并通过`fill`填充颜色，可以提升文本的清晰度： ```javascript text.setAttribute("fill", "#ffffff"); text.setAttribute("stroke", "transparent"); ``` 这种方式可以有效避免SVG字体在某些环境下的模糊问题[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值