`
need_faith
  • 浏览: 82246 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

获取SVG文档所占矩形区域大小

阅读更多

在使用SVG中经常需要知道整个SVG文档所占矩形区域大小

我们可以获取包装SVG文档的HTML dom元素的大小,但是总感觉是隔着衣服挠痒痒,SVG文档的大小最好由SVG接口提供

 

var svgDoc = document;     // js in svg so this document is svgDoc
var width = svgDoc.rootElement.getBBox().width;
var heigth = svgDoc.rootElement.getBBox().height;

 

1
0
分享到:
评论
2 楼 need_faith 2010-07-13  
haha5di 写道
   特地注册个号感谢下
我找这玩意三天了 试了好几种方法
我是在html中获取SVG的大小(byID)
但一直不行   今天终于找着了  太感谢了  

另外能介绍下SVG的资料哪里多吗?  不胜感激 

SVG规范文档http://www.w3.org/TR/SVG/
一个外国的SVG教学网站http://www.learnsvg.com/
另外我看了<SVG开发实践>黄凯伟 电子工业出版社这本书,内容详尽,但是怀疑多出抄袭网上的,希望对你有用
1 楼 haha5di 2010-07-12  
   特地注册个号感谢下
我找这玩意三天了 试了好几种方法
我是在html中获取SVG的大小(byID)
但一直不行   今天终于找着了  太感谢了  

另外能介绍下SVG的资料哪里多吗?  不胜感激 

相关推荐

    svg入门pdf文档

    - **Viewport和Viewbox**:Viewport指定了SVG渲染区域的大小和位置,Viewbox则定义了SVG内容的原始尺寸及其在Viewport中的布局方式。 - **图形分组**:通过使用`&lt;g&gt;`标签对多个SVG元素进行分组,便于整体操作和样式...

    SVG基础(初入门的事情)

    SVG.js还支持嵌套SVG,这意味着你可以在一个SVG文档内部再创建其他的SVG文档,这些嵌套的SVG与顶级SVG具有相同的特性,这样可以实现更复杂的布局和图形组合。 此外,SVG.js提供了一系列的模块化结构,可以方便地...

    svg-bounding-box:SVG边框计算器

    这个工具通过npm(Node.js包管理器)全局安装,使得开发者能够方便地获取SVG文档中所有元素的精确边界信息,这对于布局计算、动画制作或者图形裁剪等任务非常有用。 首先,我们来了解一下SVG的基本概念。SVG是一种...

    openseadragon标注圆形、矩形、直线、文字【完整demo】.zip

    C#可以管理这些矩形的数据,包括位置、大小和样式。 3. **直线标注**: 使用SVG的line元素创建直线。记录两个点的坐标,然后创建line元素并设置其x1、y1、x2和y2属性。C#可以存储线的起点、终点、颜色等信息。 4....

    HTML5 svg实现响应鼠标移动的地上手电筒照明光亮效果源码.zip

    要创建手电筒的光亮效果,我们可以利用SVG中的`&lt;rect&gt;`或`&lt;circle&gt;`元素来表示光照区域,并通过CSS或JavaScript来控制其位置和大小。当鼠标移动时,这个光照区域会随着鼠标的坐标动态调整。 为了实现这个效果,我们...

    Calculator.js:HTML由HTML,CSS和JS制成的SVG动画计算器

    在HTML部分,计算器的各个按钮和显示区域被定义为SVG元素,如`&lt;rect&gt;`(矩形)或`&lt;text&gt;`(文本)。CSS用于设置这些元素的颜色、大小、位置等视觉属性,以及动画效果。例如,当用户点击按钮时,可能会有一个颜色变化...

    HTML5 CanvasAPI

    在HTML页面中,使用标签可以创建一块矩形区域,这块区域就是Canvas元素。默认大小是宽300像素、高150像素,但用户可以自定义大小。在页面中加入了canvas元素之后,通过JavaScript可以对Canvas进行控制。Canvas元素...

    一个基于jQuery+CSS实现的图片裁切功能源码例子

    2. **裁切框**:用户可以移动和调整大小的矩形区域,决定了最终裁切的图片部分。 3. **比例控制**:允许用户锁定裁切比例,如4:3、16:9等。 4. **预览**:实时显示裁切结果的区域,用户可以在此确认裁切效果。 5. **...

    二维码生成所需资源.rar

    它通过将信息以黑白方块的形式分布在一个矩形区域内,形成一个可读取的数据矩阵,具有高密度存储和纠错能力。二维码能够通过特定的读取设备(如手机摄像头)快速解析,进而获取其中的信息。 二、后端代码生成 在...

    js+html5实现canvas绘制简单矩形的方法

    `fillRect`方法是非常基础的Canvas API之一,用于填充矩形区域,且绘制的矩形是封闭的。此外,Canvas API还提供了其他绘制矩形的方法,如`strokeRect`和`clearRect`。`strokeRect`用于绘制矩形边框,而不填充其内部...

    java统计代码行数生成json文件+D3.js绘制树图(矩形分区图、圆状集群图、矩阵树图)+实验报告

    1. 矩形分区图(Treemap):这种图利用矩形的面积来表示数据的大小,可以展示嵌套目录的层次结构,通过颜色和大小直观地表示每个目录的代码行数。 2. 圆状集群图(Sunburst):这种图将数据分布在一个环形结构中,...

    HTML5学习文档

    本规范旨在描述一种即时模式下的API以及在光栅风格的绘图区域内绘制二维矢量图形所需的方法。这些方法主要应用于HTML5规范中定义的`&lt;canvas&gt;`元素。 ##### 1.1 术语 - **2D**:指二维空间,通常指的是X轴和Y轴构成...

    html5的使用

    综上所述,HTML5不仅提供了更为丰富的标签和技术,还增强了网页的多媒体支持能力,并引入了画布和SVG矢量图等强大工具,极大地提升了网页的互动性和表现力。开发者可以根据具体需求灵活运用这些新特性,创造更加丰富...

    HTML5高级程序设计_(2).pdf

    在HTML中,`&lt;canvas&gt;`元素被用来创建一块矩形的绘图区域,默认尺寸为300px*150px,但可通过CSS或JavaScript进行调整。要使用Canvas,首先需要获取该元素的上下文,然后通过一系列绘图命令来修改上下文,最终将这些...

    Inkscape

    - **帮助资源**:Inkscape内置了详尽的帮助文档,用户可以通过帮助菜单访问“鼠标与快捷键”指南,获取所有可用快捷键的列表以及其他帮助信息。 综上所述,Inkscape是一款功能全面、易于上手的矢量图形设计工具,...

    mxgraph的中文学习资料

    5. **画布(Canvas)**:画布是图形的最终显示区域,可以是SVG、HTML5 Canvas或VML,取决于所使用的浏览器和技术栈。 **二、mxGraph API使用** 1. **创建图和模型**:通过`mxGraphModel`和`mxGraph`对象初始化模型...

    前端项目-d3-brush.zip

    如数据绑定(`.data()`)、数据加入(`.enter()`)、更新(`.update()`)和退出(`.exit()`)等操作,以及SVG元素的创建和操作,如`rect`(矩形)或`path`(路径)元素,来实现brush的选择区域。 总的来说,"前端...

    D3.js标签库

    D3.js的核心概念是将数据与文档对象模型(DOM)绑定,通过数据的变化来驱动DOM的更新,从而实现动态和响应式的视觉展示。 在D3.js库中,主要包括以下几个关键模块和技术: 1. **选择集(Selections)**:这是D3.js...

    vml柱状图 vml html jquery

    VML使用XML语法,通过`&lt;v:shape&gt;`标签定义形状,如矩形,可以用来绘制柱状图的每个柱子。属性包括`id`、`style`、`coordsize`、`path`等,其中`path`用于定义图形的路径,`fillcolor`和`strokecolor`分别设置填充色...

Global site tag (gtag.js) - Google Analytics