html5 crop,HTML5内联SVG autocrop空格
我有一个使用php和数据库中的一些数据生成的SVG图(复杂一点).在那种情况下,我无法预测svg和任何东西上的标签长度.图表是动态生成的,数据始终是未知的.这就是为什么,我从这开始:
我正在设置巨大的viewbox(1000,1000),我开始在这个视图框的中间生成SVG.之后,有些元素有时靠近左边,另一个元素靠近顶部,例如在底部我有200个空白矩形.
是否有任何选项可以在SVG中自动切换空白以匹配内容？我有一种直觉,认为我的想法不好,我缺少一些东西或做了一些非常错误的事情.
我没有在这里添加任何进一步的代码,因为它没有意义SVG生成函数真的是巨大而复杂的,而问题对应于最终结果.
任何解决方案或想法将不胜感激,问题对应于html5和svg(标签),但解决方案也可以是javascript或css(如果存在).
更新:我被要求进行真正的演示(最小):
.chart {
overflow: auto;
position: relative;
border: 1px solid #ccc;
width: 500px;
background: #fff;
}
.chart .point {
stroke: #555;
stroke-width: 10;
fill: #000;
}
.chart .plot {
stroke: #aaa;
stroke-width: 2;
}
.chart .popup {
fill: #000;
font-family: sans-serif;
}
.chart .axis {
stroke: #aaa;
stroke-width: 1;
}
.chart .grid {
stroke: #ccc;
stroke-width: 1;
}
.chart .legend {
fill: black;
font-family: sans-serif;
}
.region:hover .popup {
visibility: visible;
}
0
1
2
3
2014-05-04
0
2014-05-05
0
2014-05-06
0
2014-05-07
0
2014-05-08
0
2014-05-09
4
2014-05-10
0
2014-05-11
0
在这种情况下,图表是最小的一个.我有8到12倍的大,而且复杂得多一次.感谢评论.
html5 crop,HTML5内联SVG autocrop空格相关推荐
- HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
- html中svg的css,HTML5 内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- html5svg在线编辑器,HTML5 内联 SVG
HTML5 内联 SVG HTML5 支持内联 SVG. SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量 ...
- 079_html5内联SVG
1. html5支持内联SVG. 2. 什么是SVG? 2.1. SVG指可伸缩矢量图形(Scalable Vector Graphics). 2.2. SVG用于定义用于网络的基于矢量的图形. 2. ...
- html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
- html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)
HTML 和 可以通过 和 将 HTML 元素组合起来. HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level e ...
- html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG
如今这很简单. 基本思路是: > svg到画布 > canvas到dataUrl >从dataUrl触发下载 它实际上在stackoverflow片段之外工作 var btn = d ...
- 第八课--H5内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- Html内联定义特点,HTML5
HTML5 内联 SVG HTML5 支持内联 SVG (Scalable Vector Graphics),看下图例子,进一步了解 SVG : SVG 对不起,您的浏览器不支持内联SVG(Sorry ...
- svg里写入html标签,如何将HTML元素放在内联SVG上
我可以使用z-index以各种顺序将各种 HTML元素放在彼此之上,除了内联SVG中的一个元素.例如,给定HTML Text before SVG. I'm some boring text. Suc ...
最新文章
- Android 进程常驻（使用第三方MarsDaemon）（虽然不可用，但是还是保留下。）
- python numpy.savetxt()，np.column_stack保存（多行/列）数据 保存多维数组
- 怎么设置表格根据窗口自动调整_Word排版技巧之表格美化，你值得拥有！
- 【C#】关闭 Window 之后，无法设置 Visibility，也无法调用 Show、ShowDialogor 或 WindowInteropHelper.EnsureHandle...
- 【ArcGIS微课1000例】0008：ArcGIS中如何设置相对路径？（解决图层前红色的感叹号）
- fastapi PUT更新数据 / PATCH部分更新
- 常用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集)...
- porphet论文_Facebook 时间序列预测算法 Prophet 的研究
- cass参考手册_CASS9.2参考手册
- Mybatis 中文文档
- FreeRTOS消息队列详解第一讲（全网最全）——消息队列概述
- 黑客防线2012合订本
- 计算机专业的黑板报内容,新学期黑板报文字资料参考
- 前端程序员兼职副业平台推荐
- Spring boot 2 雷神
- Ubuntu16.04安装搜狗中文输入法1（安装完成后将英文输入法列为常用输入法，中文列为第二输入法）
- 如何使用win7自带的测试工具测试电脑性能？
- 改变图片尺寸，文件大小，分辨率300dpi的方法
- python asyncio_Python 异步 IO系列：认识asyncio
- keil延时c语言程序设计,Keil C51程序设计中几种精确延时方法