• 关于

    svg-rect

    的搜索结果

回答

Website.js import Svg, { G, Path, Use, Defs, LinearGradient, Stop, Mask, } from 'react-native-svg'; /* Use this if you are using Expo import * as Svg from 'react-native-svg'; const { Circle, Rect } = Svg; */ import React from 'react'; import {View, StyleSheet} from 'react-native'; export default class SvgExample extends React.Component { render() { return ( <View style={[ StyleSheet.absoluteFill, {alignItems: 'center', justifyContent: 'center'}, ]}> <Svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width={100} height={100} viewBox="0 0 100 100"> <Defs> <LinearGradient id="background-gradient" x1="0" y1="0" y2="1" x2="0"> <Stop stopColor="#fff" offset="0%" /> <Stop stopColor="#000" offset="100%" /> </LinearGradient> <LinearGradient id="picture-gradient" x1="0" y1="0" y2="1" x2="0"> <Stop stopColor={this.props.color} offset="0%" /> <Stop stopColor={this.props.color} offset="100%" /> </LinearGradient> </Defs> <G transform="translate(50 50) translate(0 0) scale(0.5) translate(-50 -50)"> <G fill="url(#picture-gradient)"> <G transform="scale(2.0833333333333335) translate(0 -0.10000300407409668)"> <Path d="M14.1 14.5c.1-.3.2-.5.6-.4-.1-.2-.3-.5-.4-.7-.1-.2-.2-.4-.1-.6.2-.9-.1-1.6-.4-2.4-.1-.3-.4-.8-1-.7-.4-.5-.6.1-1 .2-.5.1-1 .2-1.6.3-.1 0-.2-.1-.2-.2.5-.1 1-.3 1.5-.4l-.2-.2c.2-.3.3-.5.4-.7.2-.2.4-.4.6-.3.4 0 .5-.1.5-.5 0 0 0-.1.1-.2.4.3.7.1.9-.3.1-.2 1.1-.3 1.3-.1.3.2.6.5.8.8.1.2.3.2.5.2.8-.2 1.5.2 2 .7.2.2.5.2.7.3.5-.6 1.2.2 1.7-.2l-.1-.1c-.1-.1-.3-.3-.3-.4 0-.7.1-.8.8-.6.3.1.6 0 .7.4.1.2.4.3.6.5.1.1.2.2.2.3 0 .1-.1.3-.2.4-.6.2-.9.8-1.3 1.2-.4.5-.2 1.1.4 1.3.4.1.8.2 1.3.3.4.1.6.2.7.6.1.5.4.7.8.5 0-.1-.1-.3-.1-.4-.1-.3-.3-.5 0-.8.2-.2.1-.4-.1-.6 0-.2-.2-.5-.2-.7-.1-.5.1-.7.6-.6.4 0 .8.1 1 .4.1.1.3.3.4.3.1 0 .2-.3.3-.5l.9.6c.4.2.7.5 1.1.7.3.2.7.3.7.7 0 .4-.3.7-.8.7-.7.1-1.1.5-1.3 1.2l.5-.5c.4-.4.6-.4.8.1.2.4.4.6.9.5v.1c-.2.2-.4.5-.6.8-.1-.2-.2-.3-.2-.5-.3.3-.7.4-.8.8H43C39.8 8.5 32.5 3.3 24 3.3S8.2 8.4 5 15.8h8.5c.2-.4.4-.9.6-1.3zm13.7-4.7c.1.1-.1.3-.1.6-.6-.2-1.2-.3-1.9-.5.2-.2.4-.4.6-.7-.3 0-.5 0-.8-.1-.3-.7-1-.2-1.6-.4-.1 0-.3-.2-.4-.3 0-.1.1-.4.2-.4.2-.1.5-.1.7-.1.4.1.9.2 1.3.4.6.2 1.1.4 1.7.7.1.1.2.3.3.5h-.6c.3 0 .5.1.6.3zm-2.7-4.3c.2 0 .3-.1.4-.1.9.2 1.8.2 2.7.7.3.2.6.4.9.5.3.1.5.2.8.3.4.2.4.4.2.8.2.1.3.3.4.4-.2.4-.1.7.2 1 .2.2.3.4.5.6-.6.3-1.1 0-1.5-.2l-.9-.6c-.2-.2-.4-.5-.6-.8 0 .1-.1 0-.2-.1-.4-.2-.8-.5-1.3-.7-.3-.1-.7-.2-1.1-.2-.5 0-.7-.2-.8-.7 0-.1-.1-.3-.1-.5.2 0 .3-.1.5-.1 0 0-.1-.1-.1-.3zm-.8.4c.3-.1.5.1.4.4-.1.8-.3 1-1.1.9.1-.3.1-.5.2-.7-.2-.1-.3-.1-.4-.2v-.1c.2-.2.5-.3.9-.3zm12.9 28c-.2.4-.4.8-.5 1.2-.3.8-1.2 1.2-1.8 1.7-.1.1-.3.2-.4.4-.6 1.1-1.6 1.8-2.4 2.6-.1.1-.3.1-.4.2-.2.2-.4.3-.7.5-.1.1-.1.2-.2.2-.6.3-1.3.6-1.9 1l-1.2.9c-.2.1-.4.3-.6.5-.2.2-.5.2-.6.6 0 .1-.3.2-.4.2-.2 0-.5 0-.8-.1.3-.4.5-.7.8-1 .2-.2.4-.4.5-.7 0-.3.3-.5.5-.7 1-1.2 1.7-2.6 1.9-4.2 0-.3 0-.4-.2-.5h-.1c-.9-.3-1.6-.9-1.9-1.9-.1-.4-.5-.7-.8-1-.4-.4-.4-.7-.1-1.1.1-.1.1-.2.1-.3H5c3.2 7.3 10.5 12.5 19 12.5s15.8-5.1 19-12.5h-5c-.2.3-.5.9-.8 1.5zm9.1-16.8H1.7c-1 0-1.7.8-1.7 1.7v10.3c0 .9.8 1.7 1.7 1.7h44.6c1 0 1.7-.8 1.7-1.7V18.8c0-.9-.8-1.7-1.7-1.7zm-27.7 4.4l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7l-1.2-4.4-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5-.1.1-.1.3-.2.6zm10 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4s-.3.2-.6.2c-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7L24 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1-.1.3-.1.6zm9.9 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4s-.1-.4-.2-.7L34 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1 0 .3-.1.6z" /> </G> </G> </G> </Svg> </View> ); } } 在其他文件中 import Website from '../../components/svg/Website'; ... render() { return ( <View> <Website width={windowWidth / 8} height={windowWidth / 8} color={this.props.brand.headerColor} /> </View> ) } 如果这对您不起作用,那么请尝试这种方式 import * as React from 'react'; import SvgUri from 'react-native-svg-uri'; import testSvg from './test.svg'; export default () => ( <SvgUri width="200" height="200" svgXmlData={testSvg} /> );
LiuWH 2020-01-06 14:54:36 0 浏览量 回答数 0

问题

网页中的SVG元素无法绑定jQuery事件?

目的 鼠标滑过SVG元素时SVG随机伸缩,后恢复原状(各100ms) 实现代码 <style> div{ transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒 ...
a123456678 2019-12-01 20:20:47 1643 浏览量 回答数 1

回答

<style> div{ transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒 transform-origin: 50% 50%; display: inline-block; } g.rect_group rect{ transition: all 0.1s ease;//定义SVG变换时间 } </style> <body> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script> <div> <svg height="300" width="300"> <g class="rect_group" fill="#B9D6E8">//SVG组 <rect height="100" width="20"/> <rect x="25" height="100" width="20"/> <rect x="50" height="100" width="20"/> <rect x="75" height="100" width="20"/> <rect x="100" height="100" width="20"/> </g> Sorry, your browser does not support inline SVG. </svg> <div> <script type="text/javascript"> $(document).ready(function(){ var randomHeight=function($ele){ $ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象 $ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短 setTimeout(function(){ $ele.attr("height",$ele.data("this_height")); },100);//100ms后恢复原状 } $(".rect_group rect").on("mouseover",function(){//注册时间 randomHeight($(this)); }); }) </script> </body>
a123456678 2019-12-02 02:09:45 0 浏览量 回答数 0

问题

为啥chrome使用svg技术,没法正常使用getSVGDocument这个方法?报错

在谷歌浏览器调用这个方法,就提示获取的东西为null,但是在IE下是可以的。。。 有人说是文件格式打开的原因,但是我试了把相关的html和svg部署到web容器上也是没法正常 相应的解决...
爱吃鱼的程序员 2020-06-22 17:02:39 0 浏览量 回答数 1

云产品推荐

上海奇点人才服务相关的云产品 小程序定制 上海微企信息技术相关的云产品 国内短信套餐包 ECS云服务器安全配置相关的云产品 开发者问答 阿里云建站 自然场景识别相关的云产品 万网 小程序开发制作 视频内容分析 视频集锦 代理记账服务 阿里云AIoT