优化 Symbol

优化 Symbol

Example/examples/Symbol.js

@@ -15,7 +15,7 @@ class SymbolExample extends Component{
             height="150"
             width="110"
         >
-            <Symbol id="symbol" viewbox="0 0 150 110">
+            <Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
                 <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
                 <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
             </Symbol>
@@ -24,8 +24,6 @@ class SymbolExample extends Component{
                 href="#symbol"
                 x="0"
                 y="0"
-                width="100"
-                height="50"
             />
             <Use
                 href="#symbol"
@@ -41,7 +39,6 @@ class SymbolExample extends Component{
                 width="50"
                 height="25"
             />
-
         </Svg>;
     }
 }

elements/Svg.js

@@ -43,26 +43,14 @@ class Svg extends Component{
     render() {
         let {props} = this;
         let opacity = +props.opacity;
-        if (props.viewbox) {
-            return <Surface
-                {...props}
-                style={[
-                    props.style,
-                    !isNaN(opacity) && {
-                        opacity: opacity
-                    }
-                ]}
-            >
-                <ViewBox
+        let content = props.viewbox ? <ViewBox
             viewbox={props.viewbox}
             preserveAspectRatio={props.preserveAspectRatio}
             width={props.width}
             height={props.height}
         >
             {this.getChildren()}
-                </ViewBox>
-            </Surface>;
-        }
+        </ViewBox> : this.getChildren();
 
         return <Surface
             {...props}
@@ -73,7 +61,7 @@ class Svg extends Component{
                 }
             ]}
         >
-            {this.getChildren()}
+            {content}
         </Surface>;
     }
 }

elements/Symbol.js

@@ -19,10 +19,9 @@ class Symbol extends Component{
             svgId={props.svgId}
         >
             <ViewBox
+                {...props}
                 viewbox={props.viewbox}
                 preserveAspectRatio={props.preserveAspectRatio}
-                width={props.width}
-                height={props.height}
                 shouldTransform={true}
             >
                 {props.children}

elements/ViewBox.js

@@ -13,10 +13,10 @@ import extractViewbox from '../lib/extractViewbox';
 class ViewBox extends Component{
     static displayName = 'ViewBox';
     static propType = {
-        transform: PropTypes.bool
+        shouldTransform: PropTypes.bool
     };
     static defaultProps = {
-        transform: false
+        shouldTransform: false
     };
 
     render() {
@@ -32,12 +32,14 @@ class ViewBox extends Component{
             y = viewbox.y;
         }
         return <G
+            {...this.props}
             x={x}
             y={y}
             scaleX={scaleX}
             scaleY={scaleY}
-            id={this.props.id}
-            svgId={this.props.svgId}
+            preserveAspectRatio={null}
+            viewbox={null}
+            preserveAspectRatio={null}
         >
             {(!scaleX || !scaleY) ? null : this.props.children}
         </G>