Agregar una imagen SVG avanzada

Agregue una imagen SVG avanzada al lienzo para cambiar las propiedades de las partes individuales de la imagen en tiempo de diseño o en tiempo de ejecución. Por ejemplo, para señalar el mal funcionamiento de una pieza de hardware, resalte una representación de componentes de hardware.
Requisitos previos
Para controlar las propiedades de la imagen, obtenga un archivo SVG que cumpla estos requisitos:
  • El formato de archivo es SVG 1.2 Tiny
  • El archivo contiene todos los elementos y propiedades de la imagen que desea configurar
  • Hay propiedades de relleno y trazo que tienen colores definidos como atributos XML o CSS en línea
  • Los valores de color son hexadecimales
CONSEJO: Si el archivo SVG no cumple con los requisitos, la imagen se mostrará según lo esperado, pero no podrá cambiar sus propiedades.
  1. Para agregar una imagen SVG avanzada
  2. En
    Vista del proyecto
    , haga clic con el botón derecho en el objeto o en la carpeta que contendrá la imagen y seleccione
    Nuevo
    Dibujos
    Imagen SVG avanzada
    .
  3. Haga doble clic en la imagen
    Image placeholder
     vacía que aparece en el lienzo.
  4. En
    Seleccionar archivo
    , seleccione la imagen que desea que se muestre y elija
    Seleccionar
    .
    CONSEJO:
    Para encontrar elementos, empiece a escribir el nombre del elemento que debe buscar en
    Seleccionar archivo
    .
    Si el archivo no aparece en
    Seleccionar archivo
    , seleccione
    Importar archivo(s)
     y en
    Importar archivo(s)
    , seleccione el archivo que desee importar y elija
    Seleccionar
    .
  5. (Opcional) Abra el archivo SVG en un editor de texto y compruebe que tanto el atributo
    @id
     del elemento de la imagen que desea cambiar como la propiedad que desea modificar estén presentes en el archivo SVG.
    Por ejemplo, para poder cambiar el estilo de polígono de un chasis:
    <g id="
    ConveyorChassis
    ">
    <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/>
</g>
  6. En
    Propiedades
    , expanda
    Propiedades del elemento SVG
     y después, en
    ID
    , seleccione el elemento de imagen que desee cambiar.
    CONSEJO: Las opciones desplegables de los elementos de archivos SVG corresponden a los atributos
    @id
     de los elementos del archivo SVG. Si los valores no aparecen en el menú desplegable, es posible que la imagen SVG no cumpla los requisitos necesarios para controlar las propiedades de la imagen.
  7. En
    Propiedad
    , seleccione la propiedad que desea cambiar del elemento de imagen seleccionado y después, en
    Valor
    , seleccione
    Agregar vínculo dinámico
     para crear un vínculo dinámico complejo o introduzca un valor para la propiedad indicada:
    • Color
      . Seleccione o introduzca el valor hexadecimal del color o cree un vínculo dinámico complejo con un convertidor a valores de color hexadecimales. Por ejemplo:
    • Opacidad
      . Introduzca un valor entre 0 y 100 para que el elemento de imagen sea completamente transparente o completamente opaco.
    • Ancho de trazo
      . Introduzca el ancho de línea en píxeles.
    • Dasharray de trazo
      . Especifique la matriz de guiones de una de las siguientes maneras:
      • Seleccione o introduzca
        Sólido
        . Este es el valor predeterminado.
      • Introducir un solo número. El número representa tanto la longitud del guión como la longitud del espacio entre los guiones. Por ejemplo, introduzca 5 para que tanto la longitud del guión como la longitud del espacio entre los guiones sea de 5 píxeles.
      • Configurar una serie de números separados por punto y coma en el formato repetible #;#. El primer número representa la longitud del guión y el número después de cada punto y coma representa la longitud del espacio entre los guiones. Se repetirá la serie introducida. Por ejemplo, introduzca 5; 2; 10; 3 para que el primer guión sea de cinco píxeles y el espacio después de ese guión sea de dos píxeles, seguido de otro guión de 10 píxeles y un espacio de 3 píxeles. La serie se repite para mostrar el guión más corto seguido de un guión más largo para toda la línea.
    CONSEJO:
    Al enlazar la propiedad dasharray a una variable de cadena o etiqueta en un controlador, un valor de cadena no válido da como resultado el valor de la propiedad dasharray cuando dicho valor cambia al valor del archivo SVG en tiempo de ejecución.
    Por ejemplo, si la matriz de guiones se define como una línea continua en el SVG avanzado, pero actualmente se muestra como un patrón de guiones, si el valor de la etiqueta enlazada en la propiedad dasharray cambia a un valor no válido, como abc, o contiene un error tipográfico de formato de cadena, como 1;5:8, el valor vuelve a la línea continua especificada en el archivo SVG.
    CONSEJO: La propiedad que seleccione para el elemento de imagen debe estar en el archivo de imagen SVG junto con el elemento de imagen o, de lo contrario, no podrá configurar la propiedad del elemento de imagen.
  8. Para agregar una propiedad adicional para SVG, junto a
    Propiedades del elemento SVG
    , seleccione
    Add
     y repita los pasos 5 y 6. Por ejemplo, si ha configurado
    Color
     para un elemento de imagen SVG, puede agregar una propiedad
    Opacidad
     para cambiar la opacidad de ese mismo elemento de imagen o de un elemento de imagen diferente.
  9. Para cambiar las propiedades predeterminadas del SVG, en
    Propiedades
    , expanda
    Aspecto
     y cambie las propiedades creando un vínculo dinámico complejo o introduciendo un valor.
Ejemplo de imagen SVG avanzada: alarma deshabilitada (chasis del transportador gris)
Ejemplo de imagen SVG avanzada: alarma habilitada (chasis del transportador rojo)
Entregue su opinión
¿Tiene dudas o comentarios acerca de esta documentación? Por favor deje su opinión aquí.
Normal