Question

问题是我需要仅使用它的文件名来访问动态导入的svg，然后访问其圆形标记的颜色/填充值。

用户将路由到数百个可能的页面中的一个，每个页面都有一个3个字母的代码，我只知道页面的名称是否有路由代码。每个3个字母的代码都映射到.svg文件。

我发现这样做的唯一方法是使用HTML对象标记或img标记，因为我可以指定SVG的路径而不是内联它。

<object ref="symbol" type="image/svg+xml" :data="'statics/icons/svg/color/' + symbol + '.svg'"></object>

或：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" fill-rule="evenodd">
    <circle cx="16" cy="16" r="16" fill="#F7931A"/>
    <path fill="#FFF" fill-rule="nonzero" d="long string of path data..."/>
  </g>
</svg>

这有效，但我想做一些奇特的事情，让我的页面背景颜色与svg中的主色相同。因此，我不能使用图像导入方法，因为DOM由于某种原因永远不会看到SVG xml。

我的SVG看起来像这样：

<circle>

我所关心的只是获得“填充”。 mounted: function () { console.log(this.$refs.symbol.$child) console.dir(this.$refs['symbol'].contentDocument) console.dir(this.$el.childNodes) }的属性。可以吗？

我尝试过以下方法：

    render () {
        const {navigate} = this.props.navigation;
        return (
          <View style ={{flex: 1, position: 'relative'}}>
            <Mapbox.MapView
                styleURL={Mapbox.StyleURL.Dark}
                zoomLevel={15}
                centerCoordinate={[11.256, 43.770]}
                ref={map => { this.map = map; }}
                style={{flex: 1}}>
                {this.renderAnnotations([11.256, 43.770])}
            </Mapbox.MapView>


            <View style={styles.menuMainContainer}>

                {this.state.menuStatus ? <Animatable.View style={styles.menuSubcontainer}  animation={"bounceIn"}>
                    <View style={{justifyContent: 'space-between', justifyContent: 'center', flex: 1, marginBottom: 50}}>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="trash" name="Basureros"/>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="holes" name="Huecos"/>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="hydrants" name="Hidrantes"/>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="parking" name="Estacionamiento"/>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="others" name="Otros"/>
                      </View>
                    </View>
                  </Animatable.View> : null
                }
            </View>

            <View style ={styles.bottomContainer}>

              <TouchableOpacity  style={styles.buttons}>
                <Text style={styles.buttonText}>Boton_1</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress ={this._takePhotofromCamera} style={styles.buttons}>
                <Text style={styles.buttonText}>Agregar Reportes</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.buttons} onPress = {() => this.toggleMenuStatus()}>
                <Text style={styles.buttonText}>Boton_3</Text>
              </TouchableOpacity>
            </View>

      </View>

        )
      }
    }


    renderAnnotations = (location) =>{
        console.log('entro renderan2')
        return(
          <Mapbox.PointAnnotation
            key='pointAnnotation'
            id='pointAnnotation'
            coordinate={location}>

            <View style={styles.annotationContainer}>
              <View style={styles.annotationFill} />
            </View>
            <Mapbox.Callout title='Look! An annotation!' />
          </Mapbox.PointAnnotation>


      )
      }

    this.state.geoQuery.on("key_entered", function(key, location, distance) {
           console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})

这些似乎都不起作用，并且视图通常需要使用ref标签来访问dom或至少ID / Class。

访问没有ID的SVG的属性以及<object>标记内的属性

0 个答案: