另一个里面的圆向量答案

【问题标题】：Circle vector inside another one另一个里面的圆向量
【发布时间】：2019-07-23 07:19:39
【问题描述】：

我需要在圆形内再放一个，但我做不到。我创建了第一个形状（一个有 2 条线的圆圈。一个在顶部，另一个在底部），我需要在其中放置一个简单的圆形。也许在形状之间有一点填充。这就是我到目前为止所做的代码：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#62a35d"
        android:pathData="M17,12C17,14.42 15.28,16.44 13,16.9V21H11V16.9C8.72,16.44 7,14.42 7,12C7,9.58 8.72,7.56 11,7.1V3H13V7.1C15.28,7.56 17,9.58 17,12M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
    <path
        android:fillColor="#62a35d"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

第二个形状当前不可见。如果我将android:viewportWidth 和android:viewportHeight 从 24 更改为 64，它就会变得可见。但这不是我必须做的。

【问题讨论】：

标签： android xml svg vector android-vectordrawable

【解决方案1】：

根据您的要求，这里是一个可绘制的矢量

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="640dp"
    android:height="640dp"
    android:viewportWidth="640"
    android:viewportHeight="640">

    <path
        android:fillColor="#582370"
        android:strokeWidth="1"
        android:pathData="M465.28 323.25C465.28 403.15 400.18 468.02 320 468.02C239.82 468.02 174.72 403.15 174.72 323.25C174.72 243.35 239.82 178.49 320 178.49C400.18 178.49 465.28 243.35 465.28 323.25Z" />
    <path
        android:fillColor="#e1db5f"
        android:strokeWidth="1"
        android:pathData="M428.57 322.19C429.14 380.15 380.95 427.68 321.02 428.27C261.1 428.85 211.99 382.27 211.43 324.31C210.86 266.35 259.05 218.83 318.98 218.24C378.9 217.66 428.01 264.24 428.57 322.19Z" />
    <path
        android:fillColor="#582370"
        android:strokeWidth="1"
        android:pathData="M300.12 20.46L339.88 20.46L339.88 189.7L300.12 189.7L300.12 20.46Z" />
    <path
        android:fillColor="#582370"
        android:strokeWidth="1"
        android:pathData="M300.12 450.3L339.88 450.3L339.88 619.54L300.12 619.54L300.12 450.3Z" />
</vector>

如果你需要圈成一个圈

    <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:width="640dp"
    android:height="640dp"
    android:viewportWidth="640"
    android:viewportHeight="640">

    <path
        android:fillColor="#582370"
        android:strokeWidth="1"
        android:pathData="M483.63 266.48C483.63 346.38 418.53 411.24 338.35 411.24C258.17 411.24 193.07 346.38 193.07 266.48C193.07 186.58 258.17 121.71 338.35 121.71C418.53 121.71 483.63 186.58 483.63 266.48Z" />
    <path
        android:fillColor="#e1db5f"
        android:strokeWidth="1"
        android:pathData="M449.02 265.42C449.58 323.38 401.39 370.9 341.47 371.49C281.55 372.07 232.44 325.49 231.87 267.54C231.31 209.58 279.5 162.05 339.42 161.46C399.34 160.88 448.45 207.46 449.02 265.42Z" />
</vector>

更新：添加填充或将第三个圆圈添加到矢量图像中（填充是不可能的，所以我在图像中添加了另一个圆圈，以便您可以根据需要更改颜色）

    <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

<path
    android:fillColor="#5ba1fd"
    android:strokeWidth="1"
    android:pathData="M19.5 12.07C19.5 16.23 16.14 19.61 12 19.61C7.86 19.61 4.5 16.23 4.5 12.07C4.5 7.9 7.86 4.53 12 4.53C16.14 4.53 19.5 7.9 19.5 12.07Z" />
<path
    android:fillColor="#ffffff"
    android:strokeWidth="1"
    android:pathData="M18.11 12.07C18.11 15.4 15.42 18.1 12.11 18.1C8.79 18.1 6.11 15.4 6.11 12.07C6.11 8.74 8.79 6.03 12.11 6.03C15.42 6.03 18.11 8.74 18.11 12.07Z" />
<path
    android:fillColor="#832727"
    android:strokeWidth="1"
    android:pathData="M17.61 11.93C17.66 14.98 15.23 17.52 12.2 17.6C9.16 17.67 6.66 15.26 6.62 12.21C6.57 9.15 9 6.61 12.03 6.54C15.07 6.46 17.57 8.88 17.61 11.93Z" />
<path
    android:fillColor="#5ba1fd"
    android:strokeWidth="1"
    android:pathData="M10.5 0L13.5 0L13.5 4.7L10.5 4.7L10.5 0Z" />
<path
    android:fillColor="#5ba1fd"
    android:strokeWidth="1"
    android:pathData="M10.5 19.3L13.5 19.3L13.5 24L10.5 24L10.5 19.3Z" /></vector>

【讨论】：

只是另一件事，是否可以做同样的事情，但使用 viewportWidth 24 而不是 640？当然还有 viewportHeight
并在两个圆圈之间放置一些填充
你能分享一下你需要的图片吗
基本上，从您编写的第一个代码开始，我只需要在第一个和第二个形状之间留一些空间。黄色圆圈应该在紫色圆圈内，但周围有一些空间。只是为了分开两个形状
太完美了！谢谢

【解决方案2】：

试试这个，如果您需要更多帮助，请告诉我：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00fff"/>
        <padding
            android:bottom="30dp"
            android:left="30dp"
            android:right="30dp"
            android:top="30dp"/>
        <stroke
            android:width="1dp"
            android:color="#ffffff"/>
    </shape>
</item>
<item>
    <shape
        android:shape="oval">
        <solid
            android:color="#00666666"/>

        <size
            android:width="120dp"
            android:height="120dp"/>
        <stroke
            android:width="1dp"
            android:color="#25242b"/>
    </shape>

</item>

【讨论】：