svg学习

学习SVG主要用来解决,图片和文字、小图标等,在不同分辨率屏幕下,位置会移动。

  • 注意点

1.svg标签内不能使用div等html标签,但是可以用g来代替,见链接:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

2.svg宽高固定时,下面的其他图片位置不会因为屏幕分辨率而变动

3.svg 的文本:

<text x="20" y="35" class="small">My</text>

4.使用<img>元素来嵌入SVG图像

5.缩放,实现适配,将宽高写在viewBox内,然后设置width和height为100%

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 380 360" ><svg />

6.获取当前页面绘制的svg图像的url,参考链接:https://stacktrace.tech/2016-08-17/convert-svg-to-png-and-save/

componentDidMount(){
    var svg = document.getElementById("svg_o");
    // get svg source.
    var serializer = new XMLSerializer();
    var source = serializer.serializeToString(svg);
    // add name spaces.
    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
        source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
        source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
    }
    // add xml declaration
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
    //convert svg source to URI data scheme.
    var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
    //set url value to a element's href attribute.
    document.write('<img src="' + url + '"/>');
  }
  • demo

App.js

import React, { Component } from 'react';
import "./App.css"
import LeftFoot from "./Left@3x.png"
import RightFoot from "./Right@3x.png"
import purple from "./purple_big@3x.png"
class App extends Component {
  render() {
    return (
      <div>
        <svg width="300" height="180">
          <image xlinkHref={LeftFoot} x="100" y="0" height="100%" width="100%"/>
          <image xlinkHref={RightFoot} x="0" y="0" height="100%" width="100%"/>
          <image xlinkHref={purple} x="160" y="10" height="20px" width="20px"/>
          {/* cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0),r 属性定义圆的半径。 */}
          <circle cx="140"  cy="58" r="10" />
          <circle cx="164"  cy="54" r="10" className="red" />
          <circle cx="260" cy="70" r="10" className="fancy" />
          <rect id="R" width="100%" x="0" y="0" height="1" fill="green"/>
        </svg>
      </div>
    );
  }
}
export default App;

App.css

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: yellow;
  stroke-width: 3pt;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SVGDeveloper是一款功能强大的SVG格式编辑器,利用SVGDeveloper功能强大的绘制功能,你可以绘制诸如圆形、矩形、星形等基本形状,也可以绘制文本、图像和自由曲线等复杂图形。同时,SVGDeveloper还提供了其他一些高级功能使得你更加容易的创建和管理SVG程序。强大的代码编辑器,集成了语法着色和智能语法提示功能,使得你可以编写复杂的脚本程序,从而可创建更加复杂的SVG应用。 SVGDeveloper功能介绍 绘制各种高质量的SVG矢量图形,提供包括矩形、椭圆、圆、直线、折线、多边形等在内的基本形状构造。 支持任意形状的路径构造(贝赛尔曲线)。 支持文本构造。 支持栅格图像和SVG图像的导入。 按照命名空间和对象类型批量删除对象 转换图像为base64代码 支持线性渐变、辐射渐变和图案渲染。 基于时间线,创作包括变换、属性、运动、形状、声音、遮罩等在内的各种形式动画,同时可将动画绑定到事件; 可视化地编辑渐变、图案并生成相关动画; 图形对象的成组和解组以及层次调整功能; 语法自动加亮的代码编写机制,方便您书写SVG代码; 智能语法提示 智能化的事件创作机制,允许您通过列表式生成对象事件并自动定位到javascript代码。 打印支持 更强大的外部图图元支持 XAML支持(支持导出和语法提示) 颜色主题支持,可以定制个性化的开发环境 打印支持 SVGDeveloper截图
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值