@react-native-ohos/react-native-svg 15.0.2-rc.5 → 15.12.1-rc.10

package/harmony/svg/src/main/cpp/componentInstances/RNSVGFilterComponentInstance.cpp

@@ -0,0 +1,199 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "RNSVGFilterComponentInstance.h"
+#include "RNSVGFeColorMatrixComponentInstance.h"
+#include "RNSVGFeBlendComponentInstance.h"
+#include "RNSVGFeCompositeComponentInstance.h"
+#include "RNSVGFeFloodComponentInstance.h"
+#include "RNSVGFeOffsetComponentInstance.h"
+#include "RNSVGFeGaussianBlurComponentInstance.h"
+#include "utils/FilterManager.h"
+#include <sstream>
+#include <utility>
+#include <folly/dynamic.h>
+#include <cmath>
+#include <iomanip>
+#include <string>
+namespace rnoh {
+namespace svg {
+
+RNSVGFilterComponentInstance::RNSVGFilterComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgFilter);
+}
+
+void RNSVGFilterComponentInstance::onPropsChanged(SharedConcreteProps const &props) {}
+
+void RNSVGFilterComponentInstance::UpdateElementProps() {
+    m_svgFilter->UpdateCommonProps(m_props);
+    // Set the name as the ID for the SvgNode using the UpdateHrefRenderProps method
+    m_svgFilter->UpdateHrefRenderProps(m_props);
+    parseFilterId();
+    collectFilterEffectsInOrder();
+}
+
+void RNSVGFilterComponentInstance::parseFilterId() {
+    if (m_props) {
+        filterId_ = m_props->name;
+    }
+}
+
+void RNSVGFilterComponentInstance::collectFilterEffectsInOrder()
+{
+    if (m_svgFilter) {
+        m_svgFilter->ClearFilterEffects();
+    }
+    
+    auto children = getChildren();
+    if (collectFeDropShadowInfo()) {
+        return;
+    }
+
+    for (const auto& child : children) {
+        if (auto childInstance = std::dynamic_pointer_cast<ComponentInstance>(child)) {
+            std::string childComponentName = childInstance->getComponentName();
+            if (childComponentName.find("FeColorMatrix") != std::string::npos) {
+                collectSingleFeColorMatrix(childInstance);
+            } else if (childComponentName.find("FeFlood") != std::string::npos) {
+                collectSingleFeFlood(childInstance);
+            } else if (childComponentName.find("FeOffset") != std::string::npos) {
+                collectSingleFeOffset(childInstance);
+            } else if (childComponentName.find("FeComposite") != std::string::npos) {
+                collectSingleFeComposite(childInstance);
+            } else if (childComponentName.find("FeGaussianBlur") != std::string::npos) {
+                collectSingleFeGaussianBlur(childInstance);
+            } else if (childComponentName.find("FeBlend") != std::string::npos) {
+                collectSingleFeBlend(childInstance);
+            }
+        }
+    }
+}
+
+bool RNSVGFilterComponentInstance::collectFeDropShadowInfo()
+{
+    auto children = getChildren();
+
+    std::shared_ptr<RNSVGFeGaussianBlurComponentInstance> blurInstance = nullptr;
+    std::shared_ptr<RNSVGFeOffsetComponentInstance> offsetInstance = nullptr;
+    std::shared_ptr<RNSVGFeFloodComponentInstance> floodInstance = nullptr;
+    std::shared_ptr<RNSVGFeCompositeComponentInstance> compositeInstance = nullptr;
+
+    for (const auto& child : children) {
+        if (auto childInstance = std::dynamic_pointer_cast<ComponentInstance>(child)) {
+            std::string childComponentName = childInstance->getComponentName();
+            if (childComponentName.find("FeGaussianBlur") != std::string::npos) {
+                blurInstance = std::dynamic_pointer_cast<RNSVGFeGaussianBlurComponentInstance>(childInstance);
+            } else if (childComponentName.find("FeOffset") != std::string::npos) {
+                offsetInstance = std::dynamic_pointer_cast<RNSVGFeOffsetComponentInstance>(childInstance);
+            } else if (childComponentName.find("FeFlood") != std::string::npos) {
+                floodInstance = std::dynamic_pointer_cast<RNSVGFeFloodComponentInstance>(childInstance);
+            }
+        }
+    }
+    
+    if (blurInstance && offsetInstance && floodInstance) {
+        std::string in = blurInstance->getIn();
+        float dx = offsetInstance->getDx();
+        float dy = offsetInstance->getDy();
+        float stdDeviation = blurInstance->getStdDeviationX();
+        std::string floodColorStr = floodInstance->getFloodColor();
+        if (floodColorStr.empty()) {
+            floodColorStr = "black";
+        }
+        float floodOpacity = floodInstance->getFloodOpacity();
+        FilterEffect dropShadowEffect(FilterType::DROP_SHADOW, in, dx, dy, stdDeviation, floodColorStr, floodOpacity);
+        m_svgFilter->AddFilterEffect(dropShadowEffect);
+        return true;
+    }
+    return false;
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeColorMatrix(std::shared_ptr<ComponentInstance> childInstance)
+{
+    if (auto feColorMatrixInstance = std::dynamic_pointer_cast<RNSVGFeColorMatrixComponentInstance>(childInstance)) {
+        std::string in = feColorMatrixInstance->getIn();
+        std::string type = feColorMatrixInstance->getType();
+        std::vector<float> values = feColorMatrixInstance->getValues();
+        std::string result = feColorMatrixInstance->getResult();
+        FilterEffect colorMatrixEffect(FilterType::COLOR_MATRIX, values, in, type, result);
+        m_svgFilter->AddFilterEffect(colorMatrixEffect);
+    }
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeFlood(std::shared_ptr<ComponentInstance> childInstance)
+{
+    auto feFloodInstance = std::dynamic_pointer_cast<RNSVGFeFloodComponentInstance>(childInstance);
+    if (feFloodInstance) {
+        std::string in = feFloodInstance->getIn();
+        std::string floodColorStr = feFloodInstance->getFloodColor();
+        if (floodColorStr.empty()) {
+            floodColorStr = "black";
+        }
+        float floodOpacity = feFloodInstance->getFloodOpacity();
+        std::string result = feFloodInstance->getResult();
+        FilterEffect floodEffect(FilterType::FEFLOOD, in, floodColorStr, floodOpacity, result);
+        m_svgFilter->AddFilterEffect(floodEffect);
+    }
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeOffset(std::shared_ptr<ComponentInstance> childInstance)
+{
+    if (auto feOffsetInstance = std::dynamic_pointer_cast<RNSVGFeOffsetComponentInstance>(childInstance)) {
+        std::string in = feOffsetInstance->getIn();
+        std::string result = feOffsetInstance->getResult();
+        float dx = feOffsetInstance->getDx();
+        float dy = feOffsetInstance->getDy();
+        FilterEffect offsetEffect(FilterType::FEOFFSET, in, dx, dy, result);
+        m_svgFilter->AddFilterEffect(offsetEffect);
+    }
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeComposite(std::shared_ptr<ComponentInstance> childInstance)
+{
+    if (auto feCompositeInstance = std::dynamic_pointer_cast<RNSVGFeCompositeComponentInstance>(childInstance)) {
+        std::string in = feCompositeInstance->getIn();
+        std::string in2 = feCompositeInstance->getIn2();
+        std::string operatorType = feCompositeInstance->getOperator();
+        std::string k1 = "0", k2 = "0", k3 = "0", k4 = "0";
+        if (operatorType == "arithmetic") {
+            k1 = feCompositeInstance->getK1();
+            k2 = feCompositeInstance->getK2();
+            k3 = feCompositeInstance->getK3();
+            k4 = feCompositeInstance->getK4();
+        }
+        std::string result = feCompositeInstance->getResult();
+        FilterEffect compositeEffect(FilterType::COMPOSITE, in, in2, operatorType, k1, k2, k3, k4, result);
+        m_svgFilter->AddFilterEffect(compositeEffect);
+    }
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeGaussianBlur(std::shared_ptr<ComponentInstance> childInstance)
+{
+    if (auto feGaussianBlurInstance = std::dynamic_pointer_cast<RNSVGFeGaussianBlurComponentInstance>(childInstance)) {
+        std::string in = feGaussianBlurInstance->getIn();
+        float stdDeviationX = feGaussianBlurInstance->getStdDeviationX();
+        float stdDeviationY = feGaussianBlurInstance->getStdDeviationY();
+        std::string edgeMode = feGaussianBlurInstance->getEdgeMode();
+        std::string result = feGaussianBlurInstance->getResult();
+        FilterEffect gaussianBlurEffect(FilterType::GAUSSIAN_BLUR, in, stdDeviationX, stdDeviationY, edgeMode, result);
+        m_svgFilter->AddFilterEffect(gaussianBlurEffect);
+    }
+}
+
+void RNSVGFilterComponentInstance::collectSingleFeBlend(std::shared_ptr<ComponentInstance> childInstance)
+{
+    if (auto feBlendInstance = std::dynamic_pointer_cast<RNSVGFeBlendComponentInstance>(childInstance)) {
+        std::string in = feBlendInstance->getIn();
+        std::string in2 = feBlendInstance->getIn2();
+        std::string mode = feBlendInstance->getMode();
+        std::string result = feBlendInstance->getResult();
+        FilterEffect blendEffect(FilterType::BLEND, in, in2, mode, result);
+        m_svgFilter->AddFilterEffect(blendEffect);
+    }
+}
+}
+}

package/harmony/svg/src/main/cpp/componentInstances/RNSVGFilterComponentInstance.h

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "RNSVGBaseComponentInstance.h"
+#include "SvgFilter.h"
+#include "utils/FilterManager.h"
+#include <react/renderer/components/react_native_svg/ShadowNodes.h>
+
+namespace rnoh {
+namespace svg {
+
+
+class RNSVGFilterComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGFilterShadowNode> {
+public:
+    RNSVGFilterComponentInstance(Context context);
+
+    void onPropsChanged(SharedConcreteProps const &props) override;
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgFilter> m_svgFilter = std::make_shared<SvgFilter>();
+    std::string filterId_;
+    
+    void parseFilterId();
+    void collectFilterEffectsInOrder();
+    bool collectFeDropShadowInfo();
+    void collectSingleFeColorMatrix(std::shared_ptr<ComponentInstance> childInstance);
+    void collectSingleFeFlood(std::shared_ptr<ComponentInstance> childInstance);
+    void collectSingleFeOffset(std::shared_ptr<ComponentInstance> childInstance);
+    void collectSingleFeComposite(std::shared_ptr<ComponentInstance> childInstance);
+    void collectSingleFeGaussianBlur(std::shared_ptr<ComponentInstance> childInstance);
+    void collectSingleFeBlend(std::shared_ptr<ComponentInstance> childInstance);
+    std::vector<float> generateColorMatrix(const std::string& type, const std::vector<float>& values);
+    std::vector<float> convertBlendModeToValues(const std::string& mode);
+    std::vector<float> convertCompositeOperatorToValues(const std::string& operatorType, 
+                                                        const std::string& k1, 
+                                                        const std::string& k2, 
+                                                        const std::string& k3, 
+                                                        const std::string& k4);
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGForeignObjectComponentInstance.cpp

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ *
+ * This file incorporates from the OpenHarmony project, licensed under
+ * the Apache License, Version 2.0. Specifically:
+ * - [OpenHarmony/arkui_ace_engine] (https://gitee.com/openharmony/arkui_ace_engine)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy
+ * of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+#include "RNSVGForeignObjectComponentInstance.h"
+namespace rnoh {
+namespace svg {
+
+RNSVGForeignObjectComponentInstance::RNSVGForeignObjectComponentInstance(Context context)
+    : CppComponentInstance(std::move(context)) {
+    DLOG(INFO) << "RNSVGForeignObjectComponentInstance";
+    NativeNodeApi::getInstance()->registerNodeEvent(mForeignStackNode.getArkUINodeHandle(), NODE_EVENT_ON_AREA_CHANGE,
+                                                    NODE_EVENT_ON_AREA_CHANGE, this);
+    mForeignStackNode.insertChild(node, 0);
+}
+
+
+RNSVGForeignObjectComponentInstance::~RNSVGForeignObjectComponentInstance() {
+    NativeNodeApi::getInstance()->unregisterNodeEvent(mForeignStackNode.getArkUINodeHandle(),
+                                                      NODE_EVENT_ON_AREA_CHANGE);
+}
+
+void RNSVGForeignObjectComponentInstance::onFinalizeUpdates() {
+    ComponentInstance::onFinalizeUpdates();
+    if (m_props) {
+        mForeignStackNode.SetPointScaleFactor(getLayoutMetrics().pointScaleFactor);
+        mForeignStackNode.SetSnapPosition(propsConversionValue(m_props->x), propsConversionValue(m_props->y));
+        mForeignStackNode.SetSnapWidth(propsConversionValue(m_props->width));
+        mForeignStackNode.SetSnapHeight(propsConversionValue(m_props->height));
+
+        mForeignStackNode.SetClipPath(m_props->clipPath, m_props->clipRule);
+        mForeignStackNode.SetMask(m_props->mask);
+        mForeignStackNode.SetTransform(m_props->matrix);
+        auto childs = getChildren();
+        if (childs.size() > 0) {
+            for (ComponentInstance::Shared c : childs) {
+                if ((m_props->opacity > 0 && m_props->opacity != 1)) {
+                    setOpacity(c->getLocalRootArkUINode(), m_props->opacity);
+                }
+            }
+        }
+        mForeignStackNode.SetGeneratedPixelMap(true);
+    }
+}
+
+Dimension RNSVGForeignObjectComponentInstance::propsConversionValue(const folly::dynamic &d) {
+    if (d.isNull()) {
+        return Dimension(0, DimensionUnit::INVALID);
+    }
+    return StringUtils::StringToDimension(d.asString(), true);
+}
+
+void RNSVGForeignObjectComponentInstance::setOpacity(ArkUINode &node, float op) {
+    if (op != 1) {
+        node.setOpacity(m_props->opacity);
+    }
+}
+
+void RNSVGForeignObjectComponentInstance::onChildInserted(ComponentInstance::Shared const &childComponentInstance,
+                                                          std::size_t index) {
+    CppComponentInstance::onChildInserted(childComponentInstance, index);
+    float width = childComponentInstance->getLayoutMetrics().frame.size.width;
+    float height = childComponentInstance->getLayoutMetrics().frame.size.height;
+    mForeignStackNode.setNodeSize(width, height);
+    node.insertChild(childComponentInstance->getLocalRootArkUINode(), index);
+}
+
+void RNSVGForeignObjectComponentInstance::onChildRemoved(ComponentInstance::Shared const &childComponentInstance) {
+    CppComponentInstance::onChildRemoved(childComponentInstance);
+}
+
+SvgForeignObjectNode &RNSVGForeignObjectComponentInstance::getLocalRootArkUINode() { return mForeignStackNode; }
+
+
+} // namespace svg
+}

package/harmony/svg/src/main/cpp/componentInstances/RNSVGForeignObjectComponentInstance.h

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ *
+ * This file incorporates from the OpenHarmony project, licensed under
+ * the Apache License, Version 2.0. Specifically:
+ * - [OpenHarmony/arkui_ace_engine] (https://gitee.com/openharmony/arkui_ace_engine)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy
+ * of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+#ifndef RNSVG_FOREIGN_OBJECT_COMPONENT_INSTANCE_H
+#define RNSVG_FOREIGN_OBJECT_COMPONENT_INSTANCE_H
+#include "RNOH/CppComponentInstance.h"
+#include "SvgForeignObjectNode.h"
+#include <react/renderer/components/react_native_svg/ShadowNodes.h>
+#include "RNOH/arkui/ColumnNode.h"
+#include "RNOH/arkui/NativeNodeApi.h"
+#include "utils/DynamicUtils.h"
+#include "properties/Dimension.h"
+#include "utils/StringUtils.h"
+namespace rnoh {
+namespace svg {
+class RNSVGForeignObjectComponentInstance : public CppComponentInstance<facebook::react::RNSVGForeignObjectShadowNode> {
+public:
+    RNSVGForeignObjectComponentInstance(Context context);
+    ~RNSVGForeignObjectComponentInstance();
+
+    void onFinalizeUpdates() override;
+    void onChildInserted(ComponentInstance::Shared const &childComponentInstance, std::size_t index) override;
+
+    void onChildRemoved(ComponentInstance::Shared const &childComponentInstance) override;
+
+    SvgForeignObjectNode &getLocalRootArkUINode() override;
+    
+    void setOpacity(ArkUINode &node, float op);
+    
+    Dimension propsConversionValue(const folly::dynamic& d);
+private:
+    SvgForeignObjectNode mForeignStackNode;
+    ColumnNode node;
+};
+} // namespace svg
+} // namespace rnoh
+#endif // RNSVG_FOREIGN_OBJECT_COMPONENT_INSTANCE_H

package/harmony/svg/src/main/cpp/componentInstances/RNSVGGroupComponentInstance.cpp

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "RNSVGGroupComponentInstance.h"
+
+
+namespace rnoh {
+namespace svg {
+
+RNSVGGroupComponentInstance::RNSVGGroupComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgGroup);
+}
+
+void RNSVGGroupComponentInstance::UpdateElementProps() {
+    if (m_props && !m_props->filter.empty()) {
+        auto svgContext = m_svgGroup->GetContext();
+        if (svgContext) {
+            m_svgGroup->UpdateHrefRenderProps(m_props, true);
+        }
+    } 
+    m_svgGroup->UpdateCommonProps(m_props, true);
+     m_svgGroup->UpdateFontProps(m_props);
+    
+    m_svgGroup->InitStyle(m_svgGroup->GetBaseAttributes());
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGGroupComponentInstance.h

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+#ifndef RNSVG_GROUP_COMPONENT_INSTANCE_H
+#define RNSVG_GROUP_COMPONENT_INSTANCE_H
+#pragma once
+
+#include "RNSVGBaseComponentInstance.h"
+#include "SvgGroup.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGGroupComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGGroupShadowNode> {
+public:
+    explicit RNSVGGroupComponentInstance(Context context);
+    std::shared_ptr<SvgGroup> getNode(){
+        return m_svgGroup;
+    }
+protected:
+    void UpdateElementProps() override;
+    
+private:
+    std::shared_ptr<SvgGroup> m_svgGroup = std::make_shared<SvgGroup>();
+};
+
+} // namespace svg
+} // namespace rnoh
+#endif // RNSVG_GROUP_COMPONENT_INSTANCE_H

package/harmony/svg/src/main/cpp/componentInstances/RNSVGImageComponentInstance.cpp

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "RNSVGImageComponentInstance.h"
+#include "turboModules/RNSVGImageModule.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGImageComponentInstance::RNSVGImageComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)),
+      ImageSourceResolver::ImageSourceUpdateListener(
+          (std::dynamic_pointer_cast<RNSVGImageModule>(m_deps->rnInstance.lock()->getTurboModule("RNSVGImageModule")))
+              ->getImageSourceResolver()) {
+    SetSvgNode(m_svgImage);
+}
+
+void RNSVGImageComponentInstance::UpdateElementProps() {
+    LOG(INFO) << "XHL === RNSVGImageComponentInstance::UpdateElementProps call";
+    if (m_deps != nullptr && !m_deps->rnInstance.expired()) {
+        auto rnInstance = m_deps->rnInstance.lock();
+        if (rnInstance != nullptr) {
+            auto nativeResourceManager = rnInstance->getNativeResourceManager();
+            m_svgImage->setNativeResourceManager(nativeResourceManager);
+        }
+    }
+    m_svgImage->UpdateCommonProps(m_props);
+    m_svgImage->SetX(DynamicUtils::DynamicToString(m_props->x));
+    m_svgImage->SetY(DynamicUtils::DynamicToString(m_props->y));
+    m_svgImage->SetWidth(DynamicUtils::DynamicToString(m_props->width));
+    m_svgImage->SetHeight(DynamicUtils::DynamicToString(m_props->height));
+    m_svgImage->SetAlign(m_props->align);
+    m_svgImage->SetMeetOrSlice(m_props->meetOrSlice);
+    m_svgImage->SetImageSource(m_src);
+    LOG(INFO) << "XHL === RNSVGImageComponentInstance::UpdateElementProps end";
+}
+
+void RNSVGImageComponentInstance::onPropsChanged(SharedConcreteProps const &props) {
+    if (!m_props || m_props->src != props->src) {
+        if (!props->src.uri.empty() && props->src.uri.find("http", 0) != 0) {
+            // 非网络资源
+            m_src.uri = props->src.uri;
+            return;
+        }
+        std::string cacheDir = FindLocalCacheByUri(props->src.uri);
+        if (!cacheDir.empty()) {
+            DLOG(INFO) << "[SVGImage] hit cache: " << cacheDir;
+            m_src.uri = cacheDir;
+        }
+    }
+};
+
+std::string RNSVGImageComponentInstance::FindLocalCacheByUri(std::string const &uri) {
+    // 非网络资源，直接返回uri
+    if (uri.find("http", 0) != 0) {
+        return uri;
+    }
+
+    auto rnInstance = m_deps->rnInstance.lock();
+    if (!rnInstance) {
+        return uri;
+    }
+
+    auto turboModule = rnInstance->getTurboModule("RNSVGImageModule");
+    if (!turboModule) {
+        return uri;
+    }
+
+    auto arkTsTurboModule = std::dynamic_pointer_cast<RNSVGImageModule>(turboModule);
+    if (!arkTsTurboModule || !arkTsTurboModule->getImageSourceResolver()) {
+        LOG(ERROR) << "[SVGImage] FastImageSourceResolver is unavailable!";
+        return uri;
+    }
+
+    // 查找缓存目录
+    auto basePtr = shared_from_this();
+    auto thisPtr = std::static_pointer_cast<RNSVGImageComponentInstance>(basePtr);
+    auto cacheDir = arkTsTurboModule->getImageSourceResolver()->resolveImageSources(thisPtr, uri);
+    
+    if (!cacheDir.empty()) {
+        return cacheDir; // 如果找到缓存文件，返回缓存路径
+    }
+    // 否则开始下载
+    arkTsTurboModule->downloadImage(uri, {});
+    return ""; // 返回空字符串，表示下载未完成或缓存未命中
+}
+
+void RNSVGImageComponentInstance::onImageSourceCacheUpdate(std::string imageUri) {
+    LOG(INFO) << "[SVGImage] onImageSourceCacheUpdate, uri: " << imageUri;
+    m_src.uri = imageUri;
+    onFinalizeUpdates();
+};
+
+void RNSVGImageComponentInstance::onImageSourceCacheDownloadFileFail() {
+    LOG(ERROR) << "[SVGImage] ImageSource download fail!";
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGImageComponentInstance.h

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "RNSVGBaseComponentInstance.h"
+#include "svgImage/RNSVGImageShadowNode.h"
+#include "SvgImage.h"
+#include "downloadUtils/ImageSourceResolver.h"
+#include "downloadUtils/HttpTaskProcessor.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGImageComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGImageShadowNode>,
+                                    public ImageSourceResolver::ImageSourceUpdateListener {
+public:
+    explicit RNSVGImageComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+    void onPropsChanged(SharedConcreteProps const &props) override;
+
+    // used for find local cache of uri, if not find return uri
+    std::string FindLocalCacheByUri(std::string const &uri);
+
+    // ImageSourceUpdateListener download success callback
+    void onImageSourceCacheUpdate(std::string imageUri) override;
+
+    // ImageSourceUpdateListener download fail callback
+    void onImageSourceCacheDownloadFileFail() override;
+
+private:
+    std::shared_ptr<SvgImage> m_svgImage = std::make_shared<SvgImage>();
+    facebook::react::ImageSource m_src;
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGLineComponentInstance.cpp

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "RNSVGLineComponentInstance.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGLineComponentInstance::RNSVGLineComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgLine);
+}
+
+void RNSVGLineComponentInstance::UpdateElementProps() {
+    m_svgLine->UpdateCommonProps(m_props);
+    m_svgLine->SetX1(DynamicUtils::DynamicToString(m_props->x1));
+    m_svgLine->SetY1(DynamicUtils::DynamicToString(m_props->y1));
+    m_svgLine->SetX2(DynamicUtils::DynamicToString(m_props->x2));
+    m_svgLine->SetY2(DynamicUtils::DynamicToString(m_props->y2));
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGLineComponentInstance.h

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "RNSVGBaseComponentInstance.h"
+#include "SvgLine.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGLineComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGLineShadowNode> {
+public:
+    explicit RNSVGLineComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgLine> m_svgLine = std::make_shared<SvgLine>();
+};
+
+} // namespace svg
+} // namespace rnoh