1. javafx将svg文件导入HTML
2. HTML内联svg文件
3. JavaScript画板操作修改svg文件
4. svg修改保存
SVG:
1. SVG直接嵌套在HTML之中重现出来
2. 作为图片通过img标签引进,或者当做背景图片在CSS中通过url
引入。对于这种情况,SVG只是单纯的当做图片来使用而且一个XML类型的文档,无法使用JavaScript来操作它们。
3. 通过object、embed或者iframe标签将SVG文件引入到HTML页面上呈现出来。 这些标签实际上会把通过data或src属性指定的内容相对独立的引入到页面上来,也就是其中的内容会有完全属于自己的document对象。使用原来的document对象就无法取得通过上述标签引入进来的SVG文档中元素,无法去修改上边的属性了,使用JavaScript获取到这些元素对象的时候,可以获取所引用的SVG文档的document对象,getSVGDocument()
前端后端交互:
URL主要是由后台来写好给前端,若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数)。
接口文档主要由后台设计和修改。
后台直接跟数据打交道,最清楚数据库里有什么数据,能返回什么数据。
前端只是数据的被动接受者,只是接口文档的使用者。
使用过程中,发现返回的数据部队,则跟后台商量,由后台修改。
JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
关注点:接口地址、前端请求的参数、后端返回的参数。调一下接口,看一下返回的数据。
GET从指定的服务器中获取数据,POST提交数据给指定的服务器处理
先将要展示的页面内容进行模块划分,将模块的内容提取出来,以及方便前端的一些标志值等,将所有想要的内容和逻辑告知后端
后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息 ,URL中的参数主要是根据后台需要,若后台需要一个参数作为查询的辅助条件,前端在URL数据请求时就传递参数
所有前端请求的URL后面的参数都是辅助后台数据查询的,若不需要参数,那后台就会直接给个URL给前端
前端负责把数据展示在页面上 ,清晰的认识自己需要做的需求和任务
当前端在调用数据接口时,发现有些数据不是我们想要的,把请求的URL和返回的数据以及在页面的展示的情况给后台看
XML是有命名空间(namespace)的。命名空间在通过JavaScript创建SVG元素对象的时候就引起了一些麻烦。
这是因为创建SVG元素需要指定命名空间,就像需要在svg标签上设定xmlns为http://www.w3.org/2000/svg。正确的构造方式是调用createElentNS()方法,并将”http://www.w3.org/2000/svg”作为第一参数传入
var c = document.createElement('circle');
var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
不同于HTML元素对象可以直接对一些属性赋值,SVG元素对象都需要通过调用setAttribute()方法来设定属性值。因为大部分属性都是SVGAnimatedLength类型
对于其href
属性,在SVG之中就必须加上xmlns:
前缀来指定其命名空间了,也需要用setAttributeNS()方法并将”http://www.w3.org/1999/xlink“作为第一参数传入
var a = document.createElementNS('http://www.w3.org/2000/svg','a');
a.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','http://blog.iderzheng.com/');
对于其它该命名空间下的属性也是如此,例如xlink:title、xlink:show